如何创建一个图像生成器来组合多个图像？ [英] How to create an image generator for combining multiple images?

问题描述

更新
我正在使用HTML5 canvas和jQuery / JS处理图像生成器。
我想要完成的是以下内容。

Update I am working on an image generator using HTML5 canvas and jQuery/JS. What I want to accomplish is the following.

用户可以将2或3个图像（类型应为png或jpg）上传到画布。
生成图像应该是1080x1920。如果哈特仅上传2张图片，则图片为1080x960。如果上传了3张图片。每张图片的大小应为1080x640。

The user can upload 2 or max 3 images (type should be png or jpg) to the canvas. The generaties images should alwaar be 1080x1920. If the hart uploads only 2 images, the images are 1080x960. If 3 images are uploaded. The size of each image should be 1080x640.

上传2或3张图片后，用户可以点击下载按钮获取合并后的图片，格式为1080x1920px。

After they upload 2 or 3 images, the user can click on the download button to get the merged image, with a format of 1080x1920px.

IT应该使用html canvas来完成这项工作。

IT should make use of html canvas to get this done.

我想出了这个：

HTML：

 <canvas id="canvas">
        Sorry, canvas not supported
    </canvas><!-- /canvas.offers -->
    <input id="fileInput" type="file" />
<a href="#" class="generate">Generate</a>

jQuery：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.height = 400;
canvas.width = 800;


var img1 = loadImage('http://www.shsu.edu/dotAsset/0e829093-971c-4037-9c1b-864a7be1dbe8.png', main);
var img2 = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/266px-Ikea_logo.svg.png', main);

var minImages = 2;
var imagesLoaded = 0;

function main() {
    imagesLoaded += 1;

    if(imagesLoaded >= minImages) {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save();

        ctx.drawImage(img1, 0, 0);

        // ctx.translate(canvas.height/2,canvas.width/2); // move to the center of the canvas
        // ctx.rotate(270*Math.PI/180); // rotate the canvas to the specified degrees
        // ctx.drawImage(img2,0,canvas.height/2);

        ctx.translate(-canvas.height/2,canvas.width/2); // move to the center of the canvas
        ctx.rotate(90*Math.PI/180); // rotate the canvas to the specified degrees
        ctx.drawImage(img2,-img2.width/2,-img2.width/2);

        ctx.restore(); // restore the unrotated context
    }
}


function loadImage(src, onload) {
    var img = new Image();

    img.onload = onload;
    img.src = src;

    console.log(img);
    return img;
}

上面的代码将创建画布并放置两个图像（现在已经硬编码了JS）到创建的画布。它将旋转90度，但不会定位到右角。第二张图像也应位于第一张图像旁边。

Above code will create the canvas and place both images (that are now hardcoded in JS) to the created canvas. It will rotate 90 degrees, but it will not position to the right corner. Also the second image should be position beside the first one.

希望有人可以帮我解决每个图像的旋转和定位问题。如果有任何问题，请告诉我。

Hope someone can help me out with the rotation and positioning of each image side by side. If there are any questions, let me know.

工作小提琴： https://jsfiddle.net/8ww1x4eq/2/

推荐答案

看看更新后的 jsFiddle ，是您想要的吗？

Have a look at the updated jsFiddle, is that what you wanted?

请看这里关于图像轮换

更新了jsFiddle ，绘制多个图像。

Updated jsFiddle, drawing multiple images.

注意：

1. 保存脚本只是一种懒惰的方法，以确保在保存merged_image之前我已经加载了
   外部脚本......


2. 在示例脚本中没有同步，请注意在图像加载事件中调用了 addToCanvas
   ，这里可能存在竞争条件
   （但我怀疑它，因为图像被加载到
   客户端的内存中）

function addToCanvas(img) {
    // resize canvas to fit the image
    // height should be the max width of the images added, since we rotate -90 degree
    // width is just a sum of all images' height
    canvas.height = max(lastHeight, img.width);
    canvas.width = lastWidth + img.height;
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (lastImage) {
        ctx.drawImage(lastImage, 0, canvas.height - lastImage.height);
    }
    
    ctx.rotate(270 * Math.PI / 180); // rotate the canvas to the specified degrees
    ctx.drawImage(img, -canvas.height, lastWidth);
    
    lastImage = new Image();
    lastImage.src = canvas.toDataURL();
    lastWidth += img.height;
    lastHeight = canvas.height;
    imagesLoaded += 1;
}

PS：我添加了一些脚本下载合并的图像，但它会失败。错误消息是：未捕获的SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布。

PS: I've added some script to download the merged image, but it would fail. The error message was: "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

我做了一个快速的谷歌搜索它似乎与跨源资源有关。我认为它不会是FileReader的问题。 我没有时间测试，所以请测试一下（请告诉我：） 适用于FileReader！

I've done a quick Google search and it seemed to be related to Cross-origin resources. I assumed that it wouldn't be an issue with FileReader. I haven't had time to test that so please test it (and please let me know :) It works with FileReader!

这篇关于如何创建一个图像生成器来组合多个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！