关闭

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

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

目前浏览器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

Js怎么给图片打马赛克?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

js处理img标签加载图片失败,显示默认图片

如果已经引入了jquery插件,就很好办。没有的话,如果实在需要,可以附上代码,如果img标签是少量的话,可以用这个 img的onerror事件:

使用 form 和 iframe 实现图片上传回显

主要利用 form 的 target 属性,在提交表单之后 response 返回到 iframe 中。form 的 action 可以自己写,也可以直接利用 富文本编辑器的接口实现上传

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

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

PNG图片在IE6中背景不透明怎么解决?

Internet Explorer中提供了提供了独有的滤镜效果,他通过filter:progid:DXImageTransform.Microsoft.AlphaImageLoader实现。

vue中对于图片是否正常加载的思考

由于业务需要,我们需要判断图片能否正常的加载,如果未正常加载的话,需要显示一张默认图片;html会优先解析img元素会被创建,而此时imgurl还在请求中值不存在,此时就会触发onerror事件,如果加v-if,html不会解析img标签

html2canvas 生成的图片变模糊解决方案

背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。

网页上常用的图片格式及使用场景

jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,gif:无损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,png:无损压缩格式,适用于颜色数量较少的图像;svg:可缩放矢量图形

HTML5 实现图片预览和查看原图

html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码。在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地真实路径的

javascript如何判断图片是否存在?

JavaScript在实际应用中,可能有这样的需求,那就是检测一个图片是否存在。下面我们来看一下JavaScript如何判断图片是否存在。

点击更多...

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