一、使用canvas在前端实现图片水印合成
如果仅仅是普通的合成,例如一个底图和一个PNG水印图片合成,直接使用canvas的drawImage()方法即可,语法如下:
context.drawImage...(img,x,y);
context.drawImage(img,x,y,width,height);
context.drawImage(img,sx,sy,swidth,sheight,x,y,width...x 画布上放置img的起始x坐标。
y 画布上放置img的起始y坐标。
width 可选。画布上放置img提供的宽度(可能会有图片剪裁效果)。
height 可选。...画布上放置img提供的高度(可能会有图片剪裁效果)。
而PNG水印图片的合成,直接连续在使用drawImage()把对应的图片绘制到canvas画布上就可以,原理就是这么简单。...(imgUpload, 0, 0, 180, 180);
};
imgUpload.src = base64;
三是在已经绘制好了本地图片的画布上继续画水印图片,并借助canvas的toDataURL(