canvas图片合成海报

//创建一共hb.js代码如下
var sthb = {//参数说明：info是一个对象里面主要传入的是绘制图片的宽高和图片的src还有我们生成的二维码图片的宽高位置init: function (info) {this.conf = info;this.cvs = document.createElement("canvas");this.ctx = this.cvs.getContext('2d');this.cvs.width = info.back.w;this.cvs.height = info.back.h;this.img_hb_back = new Image();this.img_hb_er = new Image();this.img_hb_back.crossOrigin = "anonymous";this.img_hb_er.crossOrigin = "anonymous";this.img_hb_back.src = this.conf.back.src;},//参数说明：data是我们请求回来的base64字符编码，用于我们合成图//参数说明：obj是当我们生成海报的时候把海报放入哪个img元素中，img元素就是这个obj,create: function (data, obj) {var t = this;this.img_hb_er.src = data;this.img_hb_er.onload = function () {t.ctx.drawImage(t.img_hb_back, 0, 0, t.conf.back.w, t.conf.back.h);t.ctx.drawImage(t.img_hb_er, t.conf.ercode.left, t.conf.ercode.top, t.conf.ercode.w, t.conf.ercode.h);var imageBase64 = t.cvs.toDataURL();$(obj).attr('src', imageBase64);}}
};
//在需要生成海报图的页面传入对应的参数
//设置生成海报图片的大小var conf = {back: {w: 586,h: 689,src: './img/hbback.png'},//二维码的大小和位置，可以根据实际情况调整二维码的位置ercode: {w: 186, h: 186,left: 200, top: 375,}}
//匿名函数直接引入js,初始化$(function () {$.getScript('./js/hb.js', function () {sthb.init(conf);});});//获取生成二维码的base64,生成背景图//这里二维码是请求的后台的，后台返回给我的是base64编码function getCodes() {$(".loading-mask-bg").show();let qeCode = document.querySelector("#qe-code")$.ajax({type: 'GET',url: '你的请求地址',xhrFields: {withCredentials: true},success: function (data) {//qeCode.src = data.data.imgsthb.create(data.data.img, document.querySelector("#canvas-img"));},error: function (status) {console.log(status)}});}

上面是一个方法体，我们只需要传入参数就可以生成海报

总结canvas绘制海报出现的跨域问题

1.当我们使用canvas绘制图片的时候，有可能图片会出现跨域问题，为什么会出现跨域呢，是因为你请求的图片不是本地的，如果请求的是服务器上面的图片那么你就需要给img添加一个属性crossOrigin=“anonymous”,在让你们的后台允许你跨域请求图片
2.为什么做了上面的操作还是请求跨域呢，还有一个问题就是因为你项目运行在本地的，如果想看真是的效果那么你需要把你的项目拷贝到本地服务上面去运行才可以，如果实在要在本地运行不出现跨域的话那么你可以让你们后台返回base64给你你直接将base64赋值给img的src然后在绘制这张img也是可以的

canvas图片合成海报相关推荐

利用canvas把二维码和图片合成海报
思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成 ...
Android 图片合成海报生成二维码，指定文字。
一 ,图片合成,海报增加二维码,文字,或者用户ID.先看图这个是没有合成之前的图. 合成之后的图. . 使用到的技术点 1,图片Glide 2, banner2.0 3, zxing class M ...
python图片合成海报
记录知识点备用功能:利用python合成海报,要求背景图上加上头像.昵称.二维码. import io import qrcode import requests from PIL import I ...
使用canvas在前端实现图片合成
看着总结的不错,我也就拿来主义了,做个记录,侵权必删图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的. 随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在 ...
小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...
canvas合成海报所遇问题及解决方案总结
最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canv ...
uniapp canvas 图片加上文字合成一张新图并保存到手机相册
uniapp canvas 图片加上文字合成一张新图并保存到手机相册背景图上是奖章徽章,中间加上自定义文本,我这个图是因为背景图上原来就有字,随便找的,所以跟我写的文字层叠了具体实现代码 < ...
h5 canvas html 合成,图片合成以及canvas的应用
使用 canvas 在前端实现图片合成基本API // 绘制图片常用 API const canvas = document.createElement('canvas'); const ctx = ...
canvas 图片文字合成
canvas可以合成文字图片这样可以本地预览图片了直接加载本地的图片:先用<img src="img/xx.jpg"> 引用,然后获取src 赋值到Imag ...

canvas图片合成海报

canvas图片合成海报

总结canvas绘制海报出现的跨域问题

canvas图片合成海报相关推荐

最新文章

热门文章