The 70th anniversary of the motherland, the wave of @wechat official wechat circle of friends, to add the national flag on the profile picture, to wechat balance of ten 0.. Want a girlfriend… I can’t help you, but I really have to help you with this flag.

PS: Because of the rise, I didn’t prepare enough picture resources, so I wrote a simple canvas Mosaic of file uploading and small logo.

Technical points of Canvas

  1. Gets the selected image file and saves it in the file parameter.

    let file = document.querySelector('input[type=file]').files[0] // Get the selected file, here is the image type
Copy the code

  2. New a FileReader object that stores locally selected files

    let reader = new FileReader()
reader.readAsDataURL(file) // Read the file and save the file as a URL in the Resulr attribute base64 format
Copy the code

    The FileReader object allows a Web application to asynchronously read the contents of a File (or raw data buffer) stored on the user’s computer, using a File or Blob object to specify which File or data to read.

    FileReader.readAsDataURL()

    Starts reading the contents of the specified Blob. Once complete, the result property contains a string in data: URL format to represent the contents of the file being read.

  3. File loading finished start piecing pictures

    reader.onload = function (e) { // Triggered when file reading is complete
	let result = e.target.result // Base64 image address
    var image = new Image();
    image.src = result // Set the address of image to base64
    image.onload = function () {
    	var canvas = document.querySelector("#canvas");
        var context = canvas.getContext("2d");
        canvas.width = image.width; // Set the canvas width to the image width
        canvas.height = image.height;
        context.drawImage(image, 0.0, image.width, image.height) // Draw the image on the canvas
        var image1 = new Image();
        image1.src = './selected.png';
     	image1.onload = function () {
			context.drawImage(image1, (image.width - image1.width), 0, image1.width, image1.height)
     	}
     	let dataUrl = canvas.toDataURL('image/jpeg'.1)}}Copy the code

    The reader.onload() file has been loaded

    Declare a picture object to receive the base64 address of the file.

    Image.onload () draws the image on the canvas once the image is loaded

    PS:canvas.getContext(“2d”); The 2d getContext() method must be set to return an environment for drawing on the canvas.

    PS: context. DrawImage (img, sx, sy, swidth, sheight, x, y, width, height);

    parameter describe
    img Specify the image, canvas, or video to use.
    sx Optional. The x position at which the shear began.
    sy Optional. The y position where the shear started.
    swidth Optional. The width of the clipped image.
    sheight Optional. The height of the clipped image.
    x Place the x position of the image on the canvas.
    y Place the y coordinate position of the image on the canvas.
    width Optional. The width of the image to use. (Stretch or zoom out image)
    height Optional. The height of the image to use. (Stretch or zoom out image)

    Eq: How does the position of the small icon change? Aw: The small icon is image1, and the length/width of image1 is obtained when drawing on the canvas. As can be seen from the above API, the x/ Y parameter controls the x/ Y coordinate position of the image, and we know that the position of the small icon can be customized at will by uploading the image and the width and height data of the small icon.

    Because there is no PS on the computer, hee hee ~ small icon just randomly find ~ in fact, there are many can be optimized such as adding white border. Why don’t I do it