添加的文字是写入图片的,文字会随着图片的大小、位置改变而改变
完成的效果:
代码:
<template><div><div>写入前</div><img src="/it/u=1384155777,1106731832&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" /><div>写入后</div><img :src="currentImg"></div></template><script>export default {data() {return {currentImg: ""}},mounted() {this.addTextEvent()},methods: {addTextEvent() {var _this = thislet canvas = document.createElement("canvas");canvas.width = 600;canvas.height = 400;let myImage = new Image();myImage.src = "/it/u=1384155777,1106731832&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"; // 需要添加文字的图片myImage.crossOrigin = "Anonymous";let context = canvas.getContext("2d");myImage.onload = function () {context.drawImage(myImage, 0, 0, canvas.width, canvas.height);context.font = "20px Courier New";context.fillStyle = 'red'// context.textAlign = 'end' //文字右对齐context.fillText("我是写入的文字", 250, 350); // 文字的内容和位置let base64 = canvas.toDataURL("image/png"); // "image/png" 这里注意一下_this.currentImg = base64}}},}</script>
