returnImgWithCanvas(row) { if (!row.pictures && !row.pictures[0]) { return; } console.log("row", row); const self = this; const loading = this.$loading({ lock: true, text: "图片渲染中...", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.8)" }); var url = this.$store.state.pictureAddress + row.pictures[0]; //图片URL var img = new Image(); img.crossOrigin = "Anonymous"; //解决Canvas.toDataURL 图片跨域问题 img.setAttribute("id", "my-id"); img.src = url; let rects = []; try { rects = JSON.parse(row.rects); } catch (e) { if (e) { console.log(e); this.$message.error("获取标注点信息异常!"); } } function createCanvas(width, height) { const canvas = document.createElement("canvas"); canvas.setAttribute("width", width); canvas.setAttribute("height", height); const context = canvas.getContext("2d"); context.drawImage(img, 0, 0, width, height); context.fillStyle = "rgba(255,0,0,0.3)"; context.strokeStyle = "rgb(255,0,0)"; context.lineWidth = 5; context.beginPath(); console.log("in draw", rects); if (rects.length > 0) { rects.forEach(item => { context.strokeRect(item.x * 1, item.y * 1, item.width * 1, item.height * 1); context.fillRect(item.x * 1, item.y * 1, item.width * 1, item.height * 1); }); } context.closePath(); //导出 var base64Img = canvas.toDataURL("image/jpg"); const $viewer = self.$viewerApi({ images: [base64Img] }); loading.close(); return base64Img; } img.onload = function (event) { if (rects && rects.length > 0 && typeof rects != "string") { createCanvas(this.width, this.height); } loading.close(); }; img.onerror = () => { loading.close(); this.$message.error("图片加载失败!"); }; },
