將畫布的一部分復制到圖像
[英]Copy a part of canvas to image
問題描述
我嘗試復制畫布的某個部分 ，然后將復制的部分寫入圖像。 這是我的（錯誤）方法：
var c = document.getElementById('MyCanvas'),
ctx = c.getContext('2d');
var ImageData = ctx.getImageData( 25, 25, 150, 150 );
var MyImage = new Image();
MyImage.src = ImageData ; // <-- This is wrong, but I mean something like this
你知道我怎么辦嗎？ 先感謝您。
ps：我不想復制整個畫布，而是復制它的某個部分 。
2 個解決方案
解決方案1
2 已采納 2017-07-21 10:08:52
你可以通過以下方式實現這一目標......
var c = document.getElementById('MyCanvas'); var ctx = c.getContext('2d'); // draw rectangle ctx.fillRect(0, 0, 200, 200); ctx.fillStyle = '#07C'; ctx.fillRect(25, 25, 150, 150); // get image data var ImageData = ctx.getImageData(25, 25, 150, 150); // create image element var MyImage = new Image(); MyImage.src = getImageURL(ImageData, 150, 150); // append image element to body document.body.appendChild(MyImage); function getImageURL(imgData, width, height) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; ctx.putImageData(imgData, 0, 0); return canvas.toDataURL(); //image URL }
<canvas id="MyCanvas" width="200" height="200"></canvas>
道歉沒有給出解釋
解決方案2
1 2017-07-21 10:29:09
好吧，讓我們給出這個提議。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='crop'>Crop Canvas</button>
<hr/>
<canvas id='myCanvas'></canvas>
<hr/>
<script>
(function() {
var can = document.getElementById('myCanvas');
var w = can.width = 400;
var h = can.height = 200;
var ctx = can.getContext('2d');
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
var btn = document.getElementById('crop');
btn.addEventListener('click', function() {
var croppedCan = crop(can, {x: 0, y: 0}, {x: 80, y: 100});
// Create an image for the new canvas.
var image = new Image();
image.src = croppedCan.toDataURL();
// Put the image where you need to.
document.getElementsByTagName('body')[0].appendChild(image);
return image;
});
})();
function crop(can, a, b) {
var ctx = can.getContext('2d');
var imageData = ctx.getImageData(a.x, a.y, b.x, b.y);
var newCan = document.createElement('canvas');
newCan.width = b.x - a.x;
newCan.height = b.y - a.y;
var newCtx = newCan.getContext('2d');
newCtx.putImageData(imageData, 0, 0);
return newCan;
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> </head> <body> <button id='crop'>Crop Canvas</button> <hr/> <canvas id='myCanvas'></canvas> <hr/> <script> (function() { var can = document.getElementById('myCanvas'); var w = can.width = 400; var h = can.height = 200; var ctx = can.getContext('2d'); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); var btn = document.getElementById('crop'); btn.addEventListener('click', function() { var croppedCan = crop(can, {x: 0, y: 0}, {x: 80, y: 100}); // Create an image for the new canvas. var image = new Image(); image.src = croppedCan.toDataURL(); // Put the image where you need to. document.getElementsByTagName('body')[0].appendChild(image); return image; }); })(); function crop(can, a, b) { var ctx = can.getContext('2d'); var imageData = ctx.getImageData(ax, ay, bx, by); var newCan = document.createElement('canvas'); newCan.width = bx - ax; newCan.height = by - ay; var newCtx = newCan.getContext('2d'); newCtx.putImageData(imageData, 0, 0); return newCan; } </script> </body> </html>
Fabricjs將畫布的一部分復制到另一個畫布
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.