Let me talk about my functional requirements first:
Through the canvas, customize the size of an area, in this area: add background images, overlay pictures in pictures, draw inner and outer borders, set text (text font and size color)
Rendering
The background picture is Naruto and Hinata. The one in the lower right corner belongs to the overlay effect of the pictures in the picture. The lower left and lower right are two area frames drawn separately
If you don’t need to use the function of uploading pictures, this step can be skipped, just look at the canvasdiv() method below
1. In the small picture in the lower right corner, what I do is to upload a picture. There is a button to upload the attached picture. This uses element-ui. I have pasted the code below. You can also choose not to upload and get a picture locally. pictures are also available
<el-form-item label="Attachment upload" prop="dh">
<div>
<el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove"
:before-remove="beforeRemove" :on-change="uploadTU" :auto-upload="false" :limit="1"
list-type="picture" :on-exceed="handleExceed" :file-list="fileList">
<el-button size="small" type="primary">Click to upload the attached image</el-button>
<div slot="tip" class="el-upload__tip">Only upload jpg/png files, and no more than 500kb</div>
</el-upload>
</div>
</el-form-item>
//The method of uploading and calling the attached picture, here is mainly to obtain the address of the picture,
//Here this.futuimage will be used when making drawings, so I want to save this image address here
uploadTU(file, filelist) {<!-- -->
this.futuimage = file.url
},
Image on canvas, custom text, line drawing
1. First define a canvas container
<div id="div">
<canvas id="canvas"></canvas>
</div>
2. This method writes a click event trigger by myself. I use a button to trigger it. I won’t write the button code.
//The method of image generation pdn
canvasdiv(dataUrl) {<!-- -->
var canvas = document. getElementById("canvas");
canvas. width = 1545;
canvas.height = 855;
var ctx = canvas. getContext("2d");
//Here is the background image, what I get is the local image
var image = new Image();
//You can put png pictures here, or you can put the base64 of pictures
image.src = './img/beijingtu.png';
//Legend image
var tuli = new Image();
tuli.src = './img/xiao.png';
\t\t\t
// picture attached
var futu = new Image();
futu.src = this.futuimage; //This is the base64 of the picture, mainly to explain to everyone that this type of data can be placed
\t\t\t
//Starting from this step, the canvas is started, and pictures, text, and borders are set on the canvas
image.onload = function () {<!-- -->
var imgwidth = 1400; //Background image width
var imgheight = 750; //background image height
var left = (canvas. width - imgwidth) / 2;
var top = (canvas. height - imgheight) / 2;
//The first parameter image is the local png image I read, I tried to put base64 here
//The second parameter left is the x coordinate, and the third parameter top is the y coordinate. Do you understand the coordinate axes x and y
//The fourth and fifth parameters are the width and height of the background image, the unit is px
//Tell me more about the first parameter image to see what you need to put, but I found that the base64 image cannot be adaptive
ctx.drawImage(image, left, top, imgwidth, imgheight); //Background image to canvas
//frame
ctx.moveTo(left - 20, top - 20); // move the brush to coordinates x and y
ctx.lineTo(left + imgwidth + 20, top - 20); // draw a line from the pen position to coordinates x and y
ctx.lineTo(left + imgwidth + 20, top + imgheight + 20); // draw a line from the current position to
ctx.lineTo(left - 20, top + imgheight + 20); //.From the current position...
ctx.closePath(); //closed line
ctx.lineWidth = 3; //line width
ctx.strokeStyle = 'black'; // stroke color
ctx.stroke(); //Render a straight line (stroke)
// innermost box
ctx.moveTo(left, top); //Move the brush to the coordinates
ctx.lineTo(left + imgwidth, top); // draw a line from the pen position to the coordinates
ctx.lineTo(left + imgwidth, top + imgheight); // draw a line from the current position to
ctx.lineTo(left, top + imgheight); // from current position
ctx.closePath(); //closed line
ctx.lineWidth = 1; //line width
ctx.strokeStyle = 'black'; // stroke color
ctx.stroke(); //Render a straight line (stroke)
\t\t\t\t
//Look at the legend in the lower left corner of the effect picture, the background color is white, mainly because the color of the filled area needs to add this line of code
ctx.beginPath(); //Enable path drawing, without it, the color of the area cannot be filled,
ctx.moveTo(left, imgheight / 4 * 3 + top); //Move the brush to the coordinates
ctx.lineTo(left + this.tuli_width, imgheight / 4 * 3 + top); // draw a line from the pen position to the coordinates
ctx.lineTo(left + this.tuli_width, imgheight + top); // draw a line from the current position to
ctx.lineTo(left, imgheight + top); //.From the current position
ctx.closePath(); //closed line
ctx.fillStyle = 'white';
ctx.fill(); //Set closed graphics fill
ctx.lineWidth = 1; //line width
ctx.strokeStyle = 'black'; // stroke color
ctx.stroke(); //Render a straight line (stroke)
//attached
ctx.beginPath(); //Enable path drawing, without it, the color of the area cannot be filled
ctx.moveTo(imgwidth - 300 + left, imgheight / 4 * 3 + top); //Move the brush to the coordinates
ctx.lineTo(left + imgwidth, imgheight / 4 * 3 + top); // draw a line from the pen position to the coordinates
ctx.lineTo(left + imgwidth, imgheight + top); // draw a line from the current position to
ctx.lineTo(imgwidth - 300 + left, imgheight + top); //.From the current position
ctx.lineWidth = 1; //line width
ctx.strokeStyle = 'black'; // stroke color
ctx.fillStyle = 'white';
ctx.fill(); //Set closed graphics fill
ctx.stroke(); //Render a straight line (stroke)
ctx.closePath(); //closed line
ctx.drawImage(futu, imgwidth - 300 + left, imgheight / 4 * 3 + top + 20, 300, imgheight / 4 - 20); //add pictures
//The horizontal line below the two words in the attached picture
ctx.moveTo(imgwidth - 300 + left, imgheight / 4 * 3 + top + 25); //Move the brush to the coordinates
ctx.lineTo(left + imgwidth, imgheight / 4 * 3 + top + 25);
ctx.lineWidth = 1; //line width
ctx.strokeStyle = 'black'; // stroke color
ctx.stroke(); //Render a straight line (stroke)
// draw text (text content, x coordinate, y coordinate)
ctx.font = "13px serif"; //text size
ctx.fillStyle = "black"; //text color
ctx.textAlign = "center"; //text center
ctx.font = "23px Song Simplified"
ctx.fillText("Title", canvas.width / 2, canvas.height - 835);
ctx.font = "15px bold"
ctx.fillText("Legend", left + 75, imgheight / 4 * 3 + top + 17);
ctx.fillText("small image area", imgwidth - 150 + left, imgheight / 4 * 3 + top + 17);
ctx.font = "13px bold"
ctx.fillText("custom text", left - 10, canvas.height - 835);
ctx.fillText("1:50000", canvas.width / 2, canvas.height - 12);
ctx.fillText(that.getCurrentTime(), left + imgwidth - 20, canvas.height - 12);
ctx. fillText("XXX", left - 10, canvas. height - 12);
//Display the effect of the generated picture--the second picture
var base64 = canvas. toDataURL();
document.getElementById("base64Img").src = base64;
const download = document. getElementById("download");
var ba64 = canvas.toDataURL("image/png");
// Click on the image to download
// canvas. onclick = function () {<!-- -->
// //download.click();
// var input1 = document. getElementById("upload");
// if (typeof FileReader === 'undefined') {<!-- -->
// alert("Sorry, your browser does not support FileReader");
// input1.setAttribute('disabled', 'disabled');
// } else {<!-- -->
// // console. log(typeof FileReader);
// input1.addEventListener('change', that.readFile(), false);
// /*input1.addEventListener('change', function (e){<!-- -->
// // console.log(e.target.files[0]);
// console. log(this. files[0]);
// }, false); */
// }
// };
}
},