Canvas复合：globaCompositeOperation和putImageData一起使用时失效问题

最新推荐文章于 2024-05-20 14:56:04 发布
VIP文章 最新推荐文章于 2024-05-20 14:56:04 发布
阅读量486 收藏 2
点赞数 1
分类专栏： javascript canvas html5 文章标签： canvas html5 图像处理 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42092649/article/details/115423904
版权

Canvas复合：globaCompositeOperation和putImageData一起使用时失效问题

canvas中，使用putImageData添加内容，并不遵循globaCompositeOperation的设置。

如果要使用globaCompositeOperation进行画布的复合操作，需要避免添加内容时使用putImageData操作。

可以利用drawImage、fillRect等操作进行替代。

问题描述

（发发牢骚，找了好久的问题，最后发现很简单，不记录一下意难平啊）

利用canvas给证件照换底色的过程中，到了最后一步，需要将抠好的人像和背景的图层进行合并，合成一张完整的证件照。

首先想到的就是直接背景的画布上，添加抠好图的图像数据。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

两个canvas画布，分别是抠好的人像和背景，以及通过position定位后放在一起时的样子 
// 设已有 抠图画布 originCanvas 和 背景画布 backgroundCanvas
let originCtx =
最低0.47元/天 解锁文章
Bobo1925
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp实现手写签名
weixin_61115283的博客
06-01 2046
主要功能有横屏展示签名、清空、撤销、保存、判断是否有签。贴上完整版代码，可直接使用，具体api参数参考。
question_converter_canvas:与Canvas Quiz Builder一起使用
03-14
question_converter_canvas:与Canvas Quiz Builder一起使用
html2Canvas:解决html2Canvas在IOS13.4中失效问题
05-12
html2Canvas 解决html2Canvas在ios13.4中失效问题 // 引入 import html2canvas from "../../lib/html2canvas"; // 使用, 全局window对象加入html2canvas，如果没有window就调用原来的，所以需要做判断 (window.html2canvas || html2canvas)(shareContent, opts) .then(canvas => { let url = canvas.toDataURL("image/png"); console.log(url) }) .catch(err => { // do sth
4.5.1_利用getImageData()与putImageData()方法来实现橡皮筋式选取框_改良版
jun_sun_shine的博客
05-12 478
4.5.1_利用getImageData()与putImageData()方法来实现橡皮筋式选取框_改良版<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>利用getImageData()与putImageData()方法来实现橡皮筋式选取框——改良版</title> <st
IE11 Canvas putImageData总是变成白色居然是驱动问题
Robbie Mosaic's T-Log
10-28 2315
2015-10-28 Robbie (Decheng) Fan 从没想到，IE 11的Canvas上putImageData画不出东西（无论put什么图像数据，出来的都是白色），居然是显卡驱动程序问题。开头以为是IE 11的bug，因为其他浏览器都是好的。在网上搜啊搜，都没有结果。搜到一条是在英特尔论坛上的帖子，说是觉得是HD Graphics驱动程序问题，但那位网友在更新驱动程序后也没有
HTML5如何添加图片遮罩,带有HTML5画布的putImageData的遮罩？
weixin_39680678的博客
05-31 188
我想从现有的图像中采取不规则形状的部分，并使用HTML5画布将其呈现为Javascript中的新图像。因此，只有多边形边界内的数据才会被复制。我提出的方法包括：带有HTML5画布的putImageData的遮罩？在新画布中绘制多边形。创建使用getImageData(矩形)应用数据到新的画布使用从原来的帆布clip将数据复制使用putImageData口罩它没有工作，整个矩形(例如来自边界外的来源...
html5的canvas知识总结（7）clip、globalCompositeOperation、drawImage、toDataURL、getImageData、putImageData
zyz00000000的博客
09-15 1808
复习知识： beginPath() ：开启一个新的路径，在画直线的时候，需要开启一个新的路径，在上一个路径下，移动画笔位置 closePath()：闭合路径，在画图的时候，直接将未连接的图形，闭合连接 1. clip() 方法：从原始画布中剪切任意形状和尺寸 注意：clip()方法会将他上面代码所绘制的图形的区域裁剪，在裁剪区内的内容会显示，裁剪区之外的内容不会显示。 用begi...
【uniapp】使用canvas组件编译到微信小程序兼容出错问题
TA远方
09-12 1855
使用uniapp编译跨平台项目会遇到不少兼容问题，这里主要讲canvas组件的，编译到微信小程序会有兼容出错问题，这里给讲一下解决方案，希望有帮助。
Android图片多图预览点击放大ImagePreview
xujinhao521的博客
12-09 6554
ImagePreview一个非常好用的图片预览工具库 不需要我们任何布局，只需要简单的初始化，放入数据即可，就可以实现非常好看的图片预览（多图）。 1.首先我们先引入依赖 implementation 'com.ycjiang:ImagePreview:2.3.5' 2.初始化 ZoomMediaLoader.getInstance().init(new TestImageLoader()); 3.放入数据 private List<UserViewIn
uni小程序canvas实现图像灰度和透明化
weixin_52335582的博客
08-20 3146
uni小程序canvas实现图像灰度和透明化, 原生小程序也适用
canvasinput:WebGL 和 2d 上下文的画布输入
07-15
我有几个主要目标（如下）鼓励我直接使用 typescript 而不是 javascript 开始这项工作。 这将使将除小修复之外的任何内容推回原始项目变得有点困难，但是在我达到我的第四个目标后，我将尝试与原始项目进行合并拉动...
vue-canvas:基于vue和canvas的流程图
05-15
Vue画布一个Vue.js项目构建设置 # install dependenciesnpm install# serve with hot...-report# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpm test 有关工作原理的详细说明，请查看的和。
gantt:使用jsx支持SVG、Canvas和SSR的甘特图库
07-24
使用jsx支持SVG、Canvas和SSR的甘特图库 安装 $ npm install gantt --save 用法 import { SVGGantt , CanvasGantt , StrGantt } from 'gantt' ; const data = [ { id : 1 , type : 'group' , text : '1 ...
【基础知识】HTML5 Canvas getImageData()和 putImageData() 在Canvas中绘制表面的保存与恢复(应用场景)
苏一恒
08-20 1420
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 应用场景 在需要对画布内进行鼠标的细致操作时，需要用辅助线： 1、鼠标进入画布时，先用getImageData()保存之前的ca...
canvas学习笔记：canvas对图片的像素级处理--ImageData的应用
weixin_33686714的博客
11-04 312
学习了canvas的基本绘图功能后，惊喜的发现canvas对图片数据也有相当强大的处理功能，能够从像素级别操作位图，当然[lte ie8]不支持。 主要的函数有三个： 　　ctx.createImageData(width,height);　　// 用于创建ImageData对象 　　ctx.getImageData(x,y,width,height);　　// 用于从canvas中获...
canavs像素操作 - Kaiqisan
Kaiqisan的博客
07-14 245
像素操作 就像它的名字一样，对图片的每一个像素进行操作，包括获取像素和修改像素。 关键代码 getImageData(x0, y0, width, height): 获取在某一个区间的像素信息， x1 y1 是开始坐标 ，width height 是希望获取像素的画布区间长宽。通过这个方法获取来的像素数据需要一个参数来接收，它是一个数组 ，一共有 width * height * 4 个，第4n个是所有点的 “r信息” 第4n+1个是所有点的 “g信息” 第4n+2个是所有点的 “b信息” 第4n+3个是所
卜若的代码笔记-js编程技巧-第二章：h5中canvs的putImageData函数出现生成图像数据失真的解释
qq_37080133的博客
04-22 463
1. 请不要通过canvas修改a通道数据，否则会造成rgb像素数据的失真。因为putImageData在逐像素的时候： 存在rgb = rgb*f(a)，f是某种映射，我这里没有探究，a是alpha通道。当a = 255时,f(a) = 1，就不会造成失真... 吓了我一身冷汗... ...
【html5】09-Canvas画布（1）
最新发布
m0_68467925的博客
05-20 1025
绘图方法落笔-连线-描边；解决重绘问题；连线方式；设置线帽；设置渐变方案；填充效果；非零环绕原则
vue canvas图层
08-30
Vue中使用Canvas图层可以通过以下步骤实现： 1. 在Vue组件中，创建一个Canvas元素，可以使用 `<canvas>` 标签，也可以通过JS动态创建。 2. 在Vue组件的 `mounted` 钩子函数中获取到该Canvas元素的上下文对象，可以使用 `getContext()` 方法获取上下文对象，例如： `const ctx = canvas.getContext('2d')`。 3. 在Vue组件的数据中定义需要绘制的图形或者图像的相关属性，例如：颜色、大小、位置等。 4. 使用Canvas上下文对象的方法，如 `fillRect()`、`drawImage()` 等，来绘制图形或者图像。 5. 可以通过Vue的响应式机制，将数据与Canvas绘制的结果关联起来，实现动态更新。 6. 可以为Canvas元素添加事件监听器，实现交互功能，如点击、拖拽等。 下面是一个简单的示例代码： ```vue <template> <div> <canvas ref="canvas" width="400" height="400"></canvas> </div> </template> <script> export default { mounted() { const canvas = this.$refs.canvas const ctx = canvas.getContext('2d') // 绘制矩形 ctx.fillStyle = 'red' ctx.fillRect(50, 50, 100, 100) // 绘制圆形 ctx.fillStyle = 'blue' ctx.beginPath() ctx.arc(200, 200, 50, 0, 2 * Math.PI) ctx.fill() } } </script> ``` 这是一个简单的Vue组件，其中使用了Canvas绘制了一个红色的矩形和一个蓝色的圆形。你可以根据需要修改代码来实现你想要的Canvas图层效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值