Làm thế nào để tăng DPI khi lưu canvas vào máy chủ dưới dạng tệp jpg?

Question

Mới đây trên Stackoverflow. Tôi đang làm việc trên một giải pháp, nơi tôi có thể lưu hình ảnh đã cắt bằng cách sử dụng jcrop trên máy chủ dưới dạng tệp .jpg. Hình ảnh cũng được sử dụng như một kết cấu trên bề mặt khối lập phương (tôi đang sử dụng ba.js cho điều đó). Tôi không phải là một lập trình viên chuyên nghiệp, nhưng tôi đã quản lý để có được hình ảnh trên bề mặt và lưu nó trên máy chủ.

NHƯNG, không may các tệp luôn có độ phân giải 96 DPI và chất lượng kém (thậm chí với độ phân giải 2000px X 2000px). Tôi đã cố gắng tìm một giải pháp và tôi vẫn hy vọng tìm thấy một thứ gì đó hiện đại hơn. Tôi đã nghe về phương pháp toDataURLHD chẳng hạn. Tôi đã thử nó, nhưng nó không hoạt động.

Đây là mã của tôi Javascript cho việc tải lên máy chủ:

function saveIt(){ 
var data_image_1=$('#img_front1_CANVAS_PREVIEW')[0].toDataURL('image/jpeg'); 
var postData = "canvasData="+data_image_1; 
var ajax = new XMLHttpRequest(); 
ajax.open("POST",'upload.php',true); 
ajax.setRequestHeader('Content-Type', 'canvas/upload'); 
ajax.onreadystatechange=function() 
{ 
    if (ajax.readyState == 4) 
    {alert("image saved");} 
} 
ajax.send(postData); 
} 

Và phần PHP:

if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) 
{ 
    $rawImage=$GLOBALS['HTTP_RAW_POST_DATA']; 
    $removeHeaders=substr($rawImage, strpos($rawImage, ",")+1); 
    $decode=base64_decode($removeHeaders); 
    $fopen = fopen('uploads/myImage.jpg', 'wb'); 
    fwrite($fopen, $decode); 
    fclose($fopen); 

} 

Mã này hoạt động, tôi nhận được hình ảnh trên máy chủ, nhưng chất lượng kém :

Original Image

Cropped Image

Có cách nào để nhận thêm dpi không?

EDIT:

Mã của tôi là một chút phức tạp kể từ khi tôi sử dụng nguồn lực bên ngoài. Ví dụ, thẻ canvas đã bị "ẩn". Đây cũng là một số mã của quy trình tải lên.

HTML:

<!--Upload Button--> 
<img class="email-avatar" id="img_front1" height="64" width="64" src="img.png"> 

<!--Opens a popup, where the picture is being cropped--> 
<div id="popup" class="popup"> 
<img src="" id="target" alt="Flowers" /> 
<button onclick="javascript:$.modal.close();" class="pure-button primary-button" id="Ready">Ready</button> 
</div> 

<!--After the cropping this function is called--> 

<script> 
// icon image search 
jQuery(document).ready(function($){ 
Iconcontroller('img_front1',2000,2000,0); 
}); 
</script> 

Vì vậy, ở đây tôi không thể tìm thấy bất kỳ thẻ canvas. Nhưng tôi biết, nó đã được tạo ra, và tôi tìm thấy nó trong một tập tin .js trong chức năng "Iconcontroller".

EDIT2:

Tôi nghĩ rằng tôi đã tìm thấy một phần, nơi tôi nên sửa đổi nó. Tôi đã thử phương pháp canvas.width=img.width*300/96, nhưng một cái gì đó không hoạt động. Có lẽ mã không đúng ở nơi này.

Đây là mã đầy đủ. Chăm sóc các RESIZING AND UPLOAD và update image canvas phần:

Javascript:

function Iconcontroller(OBJ_ICON_ID,SIZE_W,SIZE_H,SIZES_WH,FUNCTIONCALLBACK){ 

      // CONSTANTS AUX 
      var NAME_OBJECT_CONTROL=OBJ_ICON_ID; 
      var NAME_FILE_INPUT=NAME_OBJECT_CONTROL+'_FILES_INPUT'; 
      var NAME_PREVIEW_CANVAS=NAME_OBJECT_CONTROL+'_CANVAS_PREVIEW'; 

      var NAME_TARGET_IMG='target'; 
      var NAME_POPUP_HTML='popup'; 
      var SIZE_W=SIZE_W; 
      var SIZE_H=SIZE_H; 
      var SIZES_WH=SIZES_WH; 


      $("#"+NAME_OBJECT_CONTROL).after('<input name="'+NAME_FILE_INPUT+'" style="display:none" id="'+NAME_FILE_INPUT+'" type="file" accept="image/jpeg,image/png,image/gif" />'); 
      $("#"+NAME_OBJECT_CONTROL).after('<canvas id="'+NAME_PREVIEW_CANVAS+'" style="display:none"></canvas>'); 
      $('#'+NAME_OBJECT_CONTROL).click(
      function(){ 
       $('#'+NAME_FILE_INPUT).val(""); 
       $('#'+NAME_FILE_INPUT).click(); 
      }); 

      $('#'+NAME_FILE_INPUT).change(function(e) { 
       var file = e.target.files[0]; 
       ProcessImage(file,NAME_PREVIEW_CANVAS,NAME_TARGET_IMG,NAME_POPUP_HTML,SIZE_W,SIZE_H,SIZES_WH,FUNCTIONCALLBACK); 
      }); 

     } 

     function modal(NAME_POPUP_HTML){ 
       $("#"+NAME_POPUP_HTML).modal({escapeClose: true,clickClose: true,showClose: true}); 
     } 

     //PROCESS AND RESIZE FUNCTION 
     function ProcessImage(file,NAME_PREVIEW_CANVAS,NAME_TARGET_IMG,NAME_POPUP_HTML,SIZE_W,SIZE_H,SIZES_WH,FUNCTIONCALLBACK){ 

      var NAME_PREVIEW_CANVAS=NAME_PREVIEW_CANVAS; 
      var NAME_TARGET_IMG=NAME_TARGET_IMG; 
      var NAME_POPUP_HTML=NAME_POPUP_HTML; 
      var SIZE_W=SIZE_W; 
      var SIZE_H=SIZE_H; 

      //RESIZING AND UPLOAD 
      canvasResize(file, { 
         width: 710, 
         height: 470, 
         crop: false, 
         quality:100, 
         rotate: 0, 
         callback: function(data, width, height) { 
         // resizing img 
         var span = $('#'+NAME_TARGET_IMG).attr('src',data); 
         // detect crop 
         jcrop_obj= $('#'+NAME_TARGET_IMG).data('Jcrop'); 
         // show popup 
         $("#"+NAME_POPUP_HTML).modal({ 
           escapeClose: true, 
           clickClose: true, 
           showClose: true 
      }); 
      // si existe para cambiar el crop 
      if (jcrop_obj != null) {$('#'+NAME_TARGET_IMG).data('Jcrop').destroy()} 

           if(SIZES_WH!=1){SIZES_WH=SIZE_W /SIZE_H;} 
           else{SIZES_WH=0;} 

           // crea el jcrop for image 
           $('#'+NAME_TARGET_IMG).Jcrop({ 
            aspectRatio: SIZES_WH, 
            onChange : updatePreview, 
            onSelect : updatePreview, 
            setSelect: [ 0, 0, SIZE_W, SIZE_H] 
           }); 
         // update image canvas 
         function updatePreview(c) { 
           if(parseInt(c.w) > 0) { 
            var imageObj = $("#"+NAME_TARGET_IMG)[0]; 
            // Show image preview 
            var canvas = $("#"+NAME_PREVIEW_CANVAS)[0]; 
            canvas.width = SIZE_W*300/96; 
            canvas.height = SIZE_H*300/96; 
            var context = canvas.getContext("2d");      
                context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, SIZE_W*300/96, SIZE_H*300/96); 
               } 
              if(FUNCTIONCALLBACK){FUNCTIONCALLBACK();} 
            }; 

           } 
      }); 
     } 

Tôi cũng đã tạo ra một tập tin ZIP với các mã, vì có một số libaries. Here is the link.

EDIT3:

Không biết nơi câu trả lời từ marke đi, nhưng dù sao. Các giải pháp là tốt đẹp, tôi hy vọng tôi sẽ quản lý để thực hiện nó vào mã của tôi. Cảm ơn vì những nỗ lực của bạn, tôi thực sự đánh giá cao nó, vì tôi mới ở đây và thậm chí không mong đợi nhận được bất kỳ câu trả lời nào. :)

Answer 1

Bạn cần nhiều pixel hơn để có độ phân giải máy in phù hợp.

Một cách (như Blindman67 nói) là cắt từ hình ảnh ban đầu của bạn và để máy in mở rộng quy mô đến số lượng pixel yêu cầu.

Bạn cũng có thể thêm pixel bằng tay ...

Đây là cách:

Nếu bạn cần thêm điểm ảnh, bạn có thể tạo một khung thứ hai mà thậm chí còn lớn hơn và sử dụng phiên bản mở rộng quy mô của drawImage để mở rộng phần cắt lên xa hơn. Bạn có thể cần sử dụng kỹ thuật này nếu độ phân giải của ảnh gốc không phải là độ phân giải của máy in.

function scaleUp(img,scale){ 
    var w=img.width*scale; 
    var h=img.height*scale; 
    var c=document.createElement('canvas'); 
    cctx=c.getContext('2d'); 
    c.width=w; 
    c.height=h; 
    cctx.drawImage(img,0,0,img.width,img.height,0,0,w,h); 
    var img1=new Image(); 
    img1.src=c.toDataURL('image/jpeg',100); 
    document.body.appendChild(img1); 
}