用js两张图片合并成一张图片?

做个小项目,遇到了一个需求,就是需要上传个小LOGO的图片,然后把小LOGO图片,拖动到一张大图上,合成一张带LOGO的大图片?
求解~有没有类似插件?或者各位在哪个网站看到过这种效果,我去看看能不能扒下来~

阅读 43.4k
6 个回答
function drawAndShareImage(){
    var canvas = document.createElement("canvas");
    canvas.width = 700;
    canvas.height = 700;
    var context = canvas.getContext("2d");

    context.rect(0 , 0 , canvas.width , canvas.height);
    context.fillStyle = "#fff";
    context.fill();

    var myImage = new Image();
    myImage.src = "./2.png";    //背景图片  你自己本地的图片或者在线图片
    myImage.crossOrigin = 'Anonymous';

    myImage.onload = function(){
        context.drawImage(myImage , 0 , 0 , 700 , 700);

        context.font = "60px Courier New";
        context.fillText("我是文字",350,450);

        var myImage2 = new Image();
        myImage2.src = "./1.png";   //你自己本地的图片或者在线图片
        myImage2.crossOrigin = 'Anonymous';
        
        myImage2.onload = function(){
            context.drawImage(myImage2 , 175 , 175 , 225 , 225);
            var base64 = canvas.toDataURL("image/png");  //"image/png" 这里注意一下
            var img = document.getElementById('avatar');

            // document.getElementById('avatar').src = base64;
            img.setAttribute('src' , base64);
        }
    }
}

PS:在线图片和本地图片都要注意下跨越的问题,最好放在服务器上测试。

就是把两张图都往canvas上面绘制就好了用drawImage接口

新手上路,请多包涵

用canvas合成最后把canvas.dataToURL转成base64.用img标签加载就好了

最近做过一个类似的项目,不过还没完成,用canvas绘图,在canvas里面可以把两张图合并成一张图,具体的逻辑你可以自己想想,有时间的话我给你上代码

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏