キャンバスから印刷サイズ（300 DPI）でイメージをエクスポート

Question

私はキャンバスアプリケーションを作成しようとしています。私はちょうどキャンバスの出力である印刷イメージにこだわった。画像のサイズが小さすぎて十分に印刷できません。

1. アップロード画像やキャンバスに描く：

   後は、アプリケーションのフローです。

2. 分割キャンバスでズーム、移動、回転などの操作を行います。
3. 私はこれらの分割から1つのイメージを正常に生成しました
4. そして、私はキャンバスから印刷プロセスにbase64をエクスポートしました。

キャンバスからデータをエクスポートするときの問題は、最終画像の画質をリサイズするImagickのものをポスターで印刷することができない場合でも、小さな画像です。

はJavaScript：

function draw() { 
    var Activecanvas = document.getElementsByClassName("cf-photoframe-active"); 
    var canvas = Activecanvas[0]; 
    var ctx = canvas.getContext('2d'); 
    var ActiveCanvasId = canvas.getAttribute("id"); 
    var img = canvasDetail[ActiveCanvasId].selectedImage; 
    var imageX = canvasDetail[ActiveCanvasId].imageX; 
    var imageY = canvasDetail[ActiveCanvasId].imageY; 
    var resize = resizeDetail[ActiveCanvasId].resize; 
    var rotate = rotateDetail[ActiveCanvasId].rotate; 
    //if(resize) 
    $j("#resize").slider({ 
    value: resize, 
    min: -300, 
    max: 300, 
    step: 1, 
    }); 
    $j("#rotat").slider({ 
    value: rotate, 
    min: -180, 
    max: 180, 
    step: 1, 
    }); 
    if (img != '') { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.save(); 
    var im_width = parseInt(img.width + $j("#resize").slider('value')); 
    var im_height = parseInt(img.height + $j("#resize").slider('value')); 

    var maxWidth = canvas.width; // Max width for the image 
    var maxHeight = canvas.height; 


    var iswidthMax = 0; 
    var imageOrgWidth = img.width; 
    var imageOrgHeight = img.height; 
    if (maxWidth < maxHeight) { 
     iswidthMax = 1; 
    } else if (maxWidth == maxHeight) { 
     iswidthMax = 2; 
    } 

    if (iswidthMax == 1) { 
     maxWidth = (maxHeight * imageOrgWidth)/imageOrgHeight; 

    } else if (iswidthMax == 0) { 
     maxHeight = (maxWidth * imageOrgHeight)/imageOrgWidth; 
    } else if (iswidthMax == 2) { 
     if (img.width > img.height) { 
     maxWidth = (maxHeight * imageOrgWidth)/imageOrgHeight; 
     } else { 
     maxHeight = (maxWidth * imageOrgHeight)/imageOrgWidth; 
     } 
    } 

    var resizeVal = $j("#resize").slider('value'); 
    var nw = maxWidth + resizeVal; 
    var resizeValHeight = maxHeight * resizeVal/maxWidth; 
    var nh = maxHeight + resizeValHeight; 

    ctx.translate(imageX, imageY); 
    ctx.rotate(rotate * Math.PI/180); 
    ctx.translate(-nw/2, -nh/2); 
    ctx.drawImage(img, 0, 0, nw, nh); 
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    ctx.restore(); 
    } 
} 

Answer 1

編集用に小さいcanvas要素を持っている場合、あなたはフルサイズと出力データであるcanvas要素にそれらの小さなキャンバス要素からのデータを再結合する必要がありますその要素から。

簡潔にするために、画像を4象限にカットし、4つのキャンバス要素canvas [0]〜canvas [3]に描画して編集したとします。その後、

var imgData = []; 
for (var i = 0; i < 4; i++) { 
    var tmpCtx = canvas[i].getContext('2d'); 
    imgData[i] = tmpCtx.getImageData(0, 0, canvas[i].width, canvas[i].height); 
} 

var fullSizeCanvas = document.createElement('canvas'); 
fullSizeCanvas.width = img.width * 2; 
fullSizeCanvas.height = img.height * 2; 

var fullCtx = fullSizeCanvas.getContext('2d'); 
fullCtx.putImageData(imgData[0], 0, 0); 
fullCtx.putImageData(imgData[1], img.width, 0); 
fullCtx.putImageData(imgData[2], 0, img.height); 
fullCtx.putImageData(imgData[3], img.width, img.height); 

var data = fullSizeCanvas.toDataURL();