Jak zwiększyć DPI przy zapisywaniu płótna na serwerze jako plik jpg?

Question

Nowe tutaj na Stackoverflow. Pracuję nad rozwiązaniem, w którym można zapisać przycięte zdjęcie przy użyciu jcrop na serwerze jako plik .jpg. Obraz jest również używany jako tekstura na powierzchni sześcianu (używam do tego pliku three.js). Nie jestem zawodowym koderem, ale udało mi się uzyskać obraz na powierzchni i zapisać go na serwerze.

ALE, niestety, pliki mają zawsze rozdzielczość 96 DPI i mają niską jakość (nawet przy rozdzielczości 2000px X 2000px). Próbowałem znaleźć rozwiązanie i wciąż mam nadzieję znaleźć coś bardziej współczesnego. Słyszałem na przykład o metodzie toDataURLHD. Próbowałem, ale to nie zadziałało.

Oto mój kod JavaScript do wysyłania serwera:

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); 
} 

a część 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); 

} 

Kod działa, pojawia się obraz na serwerze, ale jakość jest słaba :

Original Image

Cropped Image

Czy istnieje sposób na zwiększenie rozdzielczości?

EDIT:

Mój kod jest trochę skomplikowane, ponieważ użyłem zasobów zewnętrznych. Tag canvas został "ukryty" na przykład. Oto także kod procedury ładowania.

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> 

Więc tutaj nie mogłem znaleźć żadnych tagów płótnie. Ale wiem, że został wygenerowany i znalazłem go w pliku .js w funkcji "Iconcontroller".

EDIT2:

Chyba znalazłem część gdzie mam go zmodyfikować. Próbowałem metody canvas.width=img.width*300/96, ale coś nie działa. Może kod nie znajduje się w odpowiednim miejscu.

Tutaj pełny kod. Opiekować się RESIZING AND UPLOAD i update image canvas części:

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();} 
            }; 

           } 
      }); 
     } 

Stworzyłem także plik zip z kodów, ponieważ istnieją pewne bibliotekami. Here is the link.

Edit3:

nie wiem gdzie odpowiedź od Marke poszedł, ale w każdym razie. Rozwiązanie było miłe, mam nadzieję, że uda mi się zaimplementować go do mojego kodu. Dziękuję za twoje wysiłki, naprawdę to doceniam, ponieważ jestem tu nowy i nawet nie spodziewałem się uzyskać żadnej odpowiedzi. :)

Answer 1

Potrzebujesz więcej pikseli, aby uzyskać odpowiednią rozdzielczość drukarki.

Jednym ze sposobów (jak mówi Blindman67) jest kadrowanie z oryginalnego obrazu i umożliwienie drukarce skalowania do wymaganej liczby pikseli.

Można również dodać ręcznie piksele ...

Oto jak:

Jeśli trzeba dodać pikseli, można utworzyć drugą płótna, które jest nawet większy i korzystać z wersji skalowania drawImage do skalowania przycięta część dalej. Być może trzeba będzie użyć tej techniki, jeśli rozdzielczość oryginalnego obrazu nie jest rozdzielczością drukarki.

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); 
}