canvas图片合成海报

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.img
                sthb.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也是可以的