为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 前端实现两张图片合成一张

前端实现两张图片合成一张

2020.07.17 17:31 8364浏览

将两张图片合成一张, 原理是利用canvas技术,先画一张画布,然后在画布上画第一张图,后面在第一张图的基础上指定位置画第二张图。可以说是有三层,底层是张画布,中间层是第一张图,上层是第二张图。一般第二张图尺寸要小于第一张图的, 不然就遮盖住了中间层的图了。

先上图看看

https://img1.sycdn.imooc.com/5f1169560001353b01480147.jpg

https://img1.sycdn.imooc.com/5f11695600011ba904060641.jpg

现在我们需要将二维码图片放到海报二维码预留的空白区域,制作出完整的海报图。

https://img3.sycdn.imooc.com/5f116a800001549b04080646.jpg

上代码:

<div>
    <img id="qrcode" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/img/promotion/qrcode.png" alt="二维码">
    <img id="poster" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/img/promotion/poster.png" alt="海报模板">
    <img id="myPoster"  alt="合成海报">
</div>
<button ng-click="drawPosterImage()">合成图片</button>

js部分:

//生成海报
$scope.drawPosterImage = function(){
    var canvas;
    canvas = document.createElement("canvas");
    canvas.width = 1242;
    canvas.height = 2208;
    var context = canvas.getContext("2d");
    context.rect(0 , 0 , canvas.width , canvas.height);
    context.fillStyle = "#fff";
    context.fill();

    var myImage2 = new Image();
    myImage2.src = $("#poster").attr("src"); 
    myImage2.crossOrigin = 'Anonymous';
    myImage2.onload = function(){
        context.drawImage(myImage2 , 0 , 0 , 1242 , 2208);

        var myImage = new Image();
        myImage.src = $("#qrcode").attr("src"); 
        myImage.crossOrigin = 'Anonymous';
        myImage.onload = function(){
            context.drawImage(myImage , 499 , 1703 , 243 , 243);
            var base64 = canvas.toDataURL("image/png");     //获取base64的图片流
            var img = document.getElementById('myPoster');
            img.setAttribute('src' , base64);

        }
    }
}


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消