canvas的处理图片功能

时间:2023-02-10 20:29:49

今天在项目中有个小需求,用户在上传一张图片时,然后需要将已有的图片都渲染成用户上传图片的形状,唯一的规则就是:这张图片某一点是透明的就不需要管,如果不是透明的那么则需要从已有的图片中找到相应的那一点的rgb值填充到这张图片上

var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
img = new Image();
img.onload = function(){
var w = img.width,h = img.height;
canvas.width = w;canvas.height = h
context.drawImage(img,0,0,w/2,h/2)
var imgData = context.getImageData(0,0,w,h)
$('div[icon=1]').each(function(){
var canvas1 = document.createElement('canvas'),
context1 = canvas1.getContext('2d'),
img1 = new Image(),
$self = $(this);
img1.onload = function(){
var w1 = img.width,h1 = img.height;
canvas1.width = w1/2;canvas1.height = h1/2
context1.drawImage(img1,0,0,w1/2,h1/2)
var d = context1.getImageData(0,0,w1,h1)
for(var i = 0;i<imgData.data.length;i += 4){
if(imgData.data[i+3] != 0){
imgData.data[i] = d.data[i]
imgData.data[i+1] = d.data[i+1]
imgData.data[i+2] = d.data[i+2]
}
}
context1.putImageData(imgData,0,0);
$self.children('img').hide()
$self.append($(canvas1))

}
img1.src = $(this).children('img').attr('src')
})
}
img.src = 'static/img/test.png'

在这过程中碰到了几个问题:

第一点:像素数组是在context.getImageData().data中的,

第二点:图片绘画完成后,需要将画布缩小一半(50%),因为在页面上给它展示的位置只有100*100,开始使用scale(0.5,0.5),只是将画布裁为一半了,画布上面的图片被裁剪一半了,大小还是那样大,后来使用context.drawImage(src,0,0,width,height),将width,height这两个值忘了。。。,这两个值是将图片渲染成多大的

第三点:谷歌浏览器下面的问题,在本地测试时,由于浏览器同源的影响,测试会报错,上传服务器上面时又碰到了一个问题context1.putImageData(imgData,0,0);

而不能使用context1.putImageData({width:width,height:height,data:data},0,0);这样浏览器也会报错

 

记录以上特点,下次查看