原生js 生成海报图_利用canvas合成图片的实现方法

时间: 2018-10-26阅读: 5528标签: 图片

目前浏览器html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。这样做的好处在于:不浪费服务器资源,响应更快,体验更好。下面就介绍下如何通过原生js 来生成海报图,实现多个图片,文字的合成效果。


代码如下:

<img src="" id="poster"/>

<script>
function drawImg(bgimg,img,txt){//背景图片,上面图片,文字
    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 = bgimg; 
    myImage.crossOrigin = 'Anonymous';

    myImage.onload = function(){
        context.drawImage(myImage , 0 , 0 , 700 , 700);
        context.font = "30px Courier New";
        context.fillText(txt,300,300)
        var myImage2 = new Image();
        myImage2.src = img; 
        myImage2.crossOrigin = 'Anonymous';
        
        myImage2.onload = function(){
            context.drawImage(myImage2 , 200 , 200 , 250 , 250);
            var base64 = canvas.toDataURL("image/png");
            var img = document.getElementById('poster');
            img.setAttribute('src' , base64);
        }
    }
}
drawImg("/Test/src/1.jpg","/Test/src/2.jpg","测试文字");
</script>

注意:图片需要注意跨域问题,最好保证都在同一服务器下。


canvas的drawImage()语法

context.drawImage(img,x,y);
context.drawImage(img,x,y,width,height);
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

各个参数示意为:

参数描述
img用来被绘制的图像、画布或视频。
sx可选。img被绘制区域的起始左上x坐标。
sy可选。img被绘制区域的起始左上y坐标。
swidth可选。img被绘制区域的宽度(如果没有后面的width或height参数,则可以伸展或缩小图像)。
sheight可选。img被绘制区域的高度(如果没有后面的width或height参数,则可以伸展或缩小图像)。
x画布上放置img的起始x坐标。
y画布上放置img的起始y坐标。
width可选。画布上放置img提供的宽度(可能会有图片剪裁效果)。
height可选。画布上放置img提供的高度(可能会有图片剪裁效果)。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1196

图片加载失败后CSS样式处理最佳实践

如果因为网络或者跨域限制等原因无法正常加载,在默认情况下会显示浏览器默认的“裂开”的图片效果,如果设置了 alt 属性值,则 alt 属性对应的内容也会一并显示。例如

javascript如何实现图片隐藏?

javascript中可以通过将图片display属性设置为none实现图片隐藏。display属性设置元素如何显示,其语法为Object.style.display=value。

css怎么让背景图片平铺?

平铺选项是在网页设计中能够经常使用到的一个选项,例如网页中常用的渐变式背景。采用传统方式制作渐变式背景,往往需要宽度为背景进行平铺。

nodejs如何下载图片?

nodejs可以使用request依赖包来下载图片。需要先安装request依赖,然后使用request向网页发出请求,最后将图片下载到本地。request模块让http请求变的更加简单。(作为客户端,去请求、抓取另一个网站的信息)

css多个img标签存在间隙的解决方法总汇

在网上整理了一些解决多个img标签存在间隙的方法:多个img标签写在一行、将要闭合标签的地方与开始标签的地方重合、在img标签的父级上写:font-size:0;这个在解决display:inline-block出现的问题也有帮助、使用display:block(img是内联元素)要float一下才行

js上传图片,利用canvas实现图片压缩

最近项目中的一个基础功能-----手机上传图片:1、利用canvas进行压缩(这个应该都比较熟悉)2、利用exif-js获取照片旋转角度属性,因为有些手机机型会因为拍照时手机的方向使拍的照片带一个旋转角度的属性

图片格式区别:png8,png24,jpg,jpeg,gif,webp

色彩丰富的、比较大的图片切成jpg格式,例如一些网站的banner图,WEBP因为体积小,正在被大量网站使用。网站加速的内容一半包含了WEBP这种格式,但是写代码必须考虑部分不支持webp,比如苹果系统的Safari浏览器就不支持。

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

解码 PNG 图片

解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 <canvas> , <img> ,Object URLs,Image URLs, Blob 对象上获取到。参见浏览器图像转换手册。

谈谈 Web 图片浏览体验与优化

图片,在一张网页上起到了相当大的作用。一个充满艺术的网站,它们的排版往往十分简洁、大方,整张网页的美感全体现在了一张背景图和产品图=== 而在浏览这样的网页时,其响应速度决定了用户体验。如果你正在打开一个自己比较感兴趣的网站

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!