canvas的处理图片功能

最新推荐文章于 2021-06-18 21:51:15 发布

转载最新推荐文章于 2021-06-18 21:51:15 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaohui108/archive/2012/03/27/2419104.html

本文介绍了一种将用户上传的图片作为模板，将其形状应用于现有图片的方法。通过使用Canvas API进行像素级操作，实现了图片的透明度判断及颜色替换功能，并解决了在不同浏览器环境下可能遇到的同源策略限制等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在项目中有个小需求，用户在上传一张图片时，然后需要将已有的图片都渲染成用户上传图片的形状，唯一的规则就是：这张图片某一点是透明的就不需要管，如果不是透明的那么则需要从已有的图片中找到相应的那一点的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);这样浏览器也会报错

记录以上特点，下次查看

转载于:https://www.cnblogs.com/xiaohui108/archive/2012/03/27/2419104.html