Come aumentare DPI quando si salva una tela sul server come file jpg?

Question

Nuovo qui su Stackoverflow. Sto lavorando a una soluzione, in cui posso salvare un'immagine ritagliata usando jcrop sul server come file .jpg. L'immagine viene anche usata come una texture su una superficie del cubo (sto usando three.js per quello). Non sono un programmatore professionista, ma sono riuscito a ottenere l'immagine in superficie e salvarla sul server.

MA, purtroppo i file hanno sempre una risoluzione di 96 DPI e una qualità scadente (anche con una risoluzione di 2000px x 2000px). Ho cercato di trovare una soluzione e spero ancora di trovare qualcosa di più contemporaneo. Ho sentito parlare del metodo toDataURLHD per esempio. L'ho provato, ma non ha funzionato.

Ecco il mio codice JavaScript per l'upload del server:

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

E la parte 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); 

} 

Il codice funziona, ottengo l'immagine sul server, ma la qualità è scarsa :

Original Image

Cropped Image

C'è un modo per ottenere più dpi?

EDIT:

Il mio codice è un po 'complesso da quando ho usato le risorse esterne. Ad esempio, il tag canvas è stato "nascosto". Ecco anche alcuni codici della procedura di caricamento.

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> 

Quindi qui non ho potuto trovare qualsiasi tag di tela. Ma so che è stato generato e l'ho trovato in un file .js all'interno della funzione "Iconcontroller".

EDIT2:

Credo di aver trovato la parte in cui avrei dovuto modificarlo. Ho provato il metodo canvas.width=img.width*300/96, ma qualcosa non funziona. Forse il codice non è nel posto giusto in questo.

Qui il codice completo. Prenditi cura le parti RESIZING AND UPLOAD e update image canvas:

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

           } 
      }); 
     } 

Ho anche creato un file zip con i codici, poiché ci sono alcuni libaries. Here is the link.

Edit3:

Non so da dove la risposta da Marke è andato, ma in ogni caso. La soluzione è stata buona, spero di riuscire a implementarla sul mio codice. Grazie per i vostri sforzi, lo apprezzo molto, visto che sono nuovo qui e non mi aspettavo nemmeno una risposta. :)

Answer 1

Sono necessari più pixel per ottenere una risoluzione della stampante adeguata.

Un modo (come dice Blindman67) è quello di ritagliare dall'immagine originale e lasciare che la stampante scala fino al numero richiesto di pixel.

È inoltre possibile aggiungere manualmente pixel ...

Ecco come:

Se avete bisogno di aggiungere pixel, è possibile creare una seconda tela che è ancora più grande e utilizzare la versione in scala di drawImage in scala la parte ritagliata più in alto. Potrebbe essere necessario utilizzare questa tecnica se la risoluzione dell'immagine originale non è la risoluzione della stampante.

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