如何使用画布更改图像的不透明度，然后将其加载到画布中的另一个图像上?-HTML

How to change the opacity of an image using canvas and then loads it on another image in canvas?-HTML

本文关键字：图像 布中 另一个 加载 -HTML 然后 布更改 何使用 不透明度      更新时间：2023-09-26

我想更改图像的不透明度以使其透明并将该图像加载到画布中的另一个图像上，因为我不想使用任何其他工具来更改第一个图像的不透明度。更改画布中加载的图像的不透明度

var imgObject=new Image();
imgObject.src="myImage.jpg";
// getting context of canvas
var ctx=document.getElementById("myCanvas").getContext("2d");
// global transparency applied on canvas context..
ctx.globalAlpha=0.5;
imgObject.onload=function(){
  ctx.drawImage(imgObject,0,0);
}

有没有办法保存透明图像（画布），然后使用它在另一个图像上的新画布中加载它。

我不知道

如何更改HTML中图像的不透明度，但是您可以通过设置globalALphaalALpha值来更改在画布元素上绘制的上下文的不透明度：

var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext('2d');
var img1 = new Image();
img1.src = "img1.png";
// drawing first image on canvas..
img1.onload = function(){
   ctx1.drawImage(img1,0,0,canvas.width,canvas.height);
};
var clonedCanvas = canvas.cloneNode(true);
var ctx2 = clonedCanvas.getContext('2d');
var img2 = new Image();
ctx2.globalAlpha = 0.4;
img2.src = "img2.jpg";
img2.onload = function(){
   ctx2.drawImage(img2,0,0);
// copying clonedCanvas to myCanvas.....
   ctx1.drawImage(clonedCanvas,0,0);
};
相关文章：