裁剪画布/导出html5画布具有一定的宽度和高度 [英] Crop Canvas / Export html5 canvas with certain width and height

问题描述

有数百个教程，如何通过drawImage（）在画布上裁剪图像。

There are hundreds of tutorials, how one can crop an image by drawImage() on a canvas.

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

但是，我有一个画布填充用户的浏览器。通过将画布导出为图像，我只想从（0 | 0）导出640像素* 480像素的区域。

However, I have a canvas that fills the user's browser. By exporting the canvas as an image I would like to export only an area of 640px*480px from (0|0).

问题：如何告诉javascript只使用640 * 480的canvas做为toDataURL（）？

Problem: How can I tell javascript to use only 640*480 of the canvas for the toDataURL()?

这里是我到目前为止：

$("#submitGraphic").click( function(){
    var canvas = document.getElementsByTagName("canvas");
    // canvas context
    var context = canvas[0].getContext("2d");
    // get the current ImageData for the canvas
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height);
    // store the current globalCompositeOperation
    var compositeOperation = context.globalCompositeOperation;
    // set to draw behind current content
    context.globalCompositeOperation = "destination-over";
    //set background color
    context.fillStyle = "#FFFFFF";
    // draw background/rectangle on entire canvas
    context.fillRect(0,0,canvas[0].width,canvas[0].height);

    // not working, seems to clear the canvas? browser hangs?
    // seems that I can click a white image in the background
    /*canvas[0].width = 640;
    canvas[0].height = 480;*/

    // not working either
    /*canvas[0].style.width  = '640px';
    canvas[0].style.height = '480px';*/

    // not working at all
    /*context.canvas.width = 640;
    context.canvas.height = 480;*/

    // write on screen
    var img = canvas[0].toDataURL("image/png");
    document.write('<a href="'+img+'"><img src="'+img+'"/></a>');
})

PS：我不想调整大小或缩放，只是剪切/裁剪到固定窗口。 这里我读到您只有

推荐答案

最好的方法是创建一个临时画布从当前画布绘制。用户永远不会看到这个临时画布。然后你只需要在临时画布上使用 toDataUrl（）。

The best way is to just create a temporary canvas to draw onto from the current canvas. The user will never see this temp canvas. Then you just need use toDataUrl() on the temp canvas.

现场演示

Live Demo

$("#submitGraphic").click( function(){
    var canvas = document.getElementsByTagName("canvas");
    // canvas context
    var context = canvas[0].getContext("2d");
    // get the current ImageData for the canvas
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height);
    // store the current globalCompositeOperation
    var compositeOperation = context.globalCompositeOperation;
    // set to draw behind current content
    context.globalCompositeOperation = "destination-over";
    //set background color
    context.fillStyle = "#FFFFFF";
    // draw background/rectangle on entire canvas
    context.fillRect(0,0,canvas[0].width,canvas[0].height);

    var tempCanvas = document.createElement("canvas"),
        tCtx = tempCanvas.getContext("2d");

    tempCanvas.width = 640;
    tempCanvas.height = 480;

    tCtx.drawImage(canvas[0],0,0);

    // write on screen
    var img = tempCanvas.toDataURL("image/png");
    document.write('<a href="'+img+'"><img src="'+img+'"/></a>');
})​

这篇关于裁剪画布/导出html5画布具有一定的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！