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

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

目前浏览器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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

前端Js图片压缩

实现思路:获取input的file;使用fileReader() 将图片转为base64;使用canvas读取base64 并降低分辨率;把canvas数据转成blob对象;把blob对象转file对象;完成压缩

vue中使用带隐藏文本信息的图片、图片水印

通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。最终达到如下效果:

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

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

WPF 中如何创建忽略 DPI 属性的图片

WPF 框架设计为与 DPI 无关,但你依然可能遇到 DPI 问题。尤其是 Image 控件显示的图片会根据图片 EXIF 中的 DPI 信息和屏幕 DPI 自动缩放图片。对于 UI 用图来说这是好事

提供图片服务网站

有了这些图片API,可以获取随机图片,很适合做Blogs背景图片,Unsplash,Pixabay,Bing每日图片,img.xjh.me

在 Chrome 75中将支持图片懒加载

Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 loading 将新增一个属性:lazy。为延迟加载提取和应用JavaScript库的重要性(对于跨浏览器支持)

html2canvas保存图片模糊问题解决

使用官网的CDN,网上可以查到很多解决方案,常用的主要就是:canvas先放大,其次加个dpi效果也可以,代码如下:

img图片不存在显示默认图

在项目中,我们使用img标签加载图片,有时候图片地址有可能失效,获取路径问题,导致图片加载失败,img标签就会显示alt内容。这时候用户体验不是很好,所以就需要显示一张默认图片

JS实现图片放大镜功能

将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容。基本实现思路为:右侧大盒子为一个可视区域,有左侧小盒子中的图片的等比例放大图片,通过计算图片需要移动的距离来显示出想要放大的内容,超出部分设置为隐藏。

nodejs实现二维码生成及图片合成

前端需要做分享功能。生成二维码后 在指定的图片上添加二维码和邀请码生成新的图片。1.使用 qr-code生成二维码;2.使用 text-to-svg 生成邀请码图片,字符转图片;3.使用gm工具合成图片

点击更多...

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