Sunucuyu bir jpg dosyası olarak kaydederken DPI nasıl yükseltilir?

Question

Stackoverflow'ta yeni bir site var. Ben kırpılmış bir görüntü sunucu üzerinde bir .jpg dosyası olarak jcrop kullanarak kaydedebileceğiniz bir çözüm üzerinde çalışıyorum. Görüntü, bir küp yüzeyinde de doku olarak kullanılır (bunun için üç.js kullanıyorum). Profesyonel bir kodlayıcı değilim, ancak resmi yüzeyden almayı ve sunucuya kaydetmeyi başardım.

AMA, maalesef dosyalar her zaman 96 DPI çözünürlüğe sahip ve düşük kaliteye sahip (2000px X 2000px çözünürlükte bile olsa). Bir çözüm bulmaya çalıştım ve daha güncel bir şey bulmayı umuyordum. Örneğin, toDataURLHD yöntemini duydum. Denedim ama işe yaramadı.

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

Ve PHP kısmı:: İşte

benim sunucu yükleme için JavaScript kodudur

kod çalışır

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

} 

, sunucuda görüntü elde ancak kalitesi kötü :

Original Image

Cropped Image

Daha fazla dpi almanın bir yolu var mı?

DÜZENLEME:

Kodum ben harici kaynakları kullanılan beri biraz karmaşık. Tuval etiketi, örneğin "gizli" idi. Burada ayrıca yükleme prosedürünün bazı kodları.

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> 

Yani burada

herhangi tuval etiketleri bulamadık. Ama biliyorum, oluşturuldu ve "Iconcontroller" işlevi içinde bir .js dosyasında buldum.

EDIT2:

ben bunu değiştirmesi gerektiğini parçasını buldum. canvas.width=img.width*300/96 yöntemini denedim, ancak bir şey çalışmıyor. Belki de buradaki kod doğru yerde değil.

Tüm kod burada. RESIZING AND UPLOAD ve update image canvas parça sonra bak:

Javascript: Bazı kütüphanelerine olmadığından

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

           } 
      }); 
     } 

Ben de, kodları ile bir ZIP dosyası oluşturdu. Here is the link.

EDIT3:

Marke gelen cevabı nereye gittiğini biliyorum, ama yine de vermeyin. Çözüm güzeldi, umarım bunu koduma uygulayacağım. Çabalarınız için teşekkür ederim, gerçekten takdir ediyorum, çünkü burada yeniyim ve herhangi bir cevap almayı beklemiyordum bile. :)

Answer 1

Yeterli yazıcı çözünürlüğüne ulaşmak için daha fazla piksele ihtiyacınız var.

Tek bir yol (Blindman67'nin dediği gibi), orijinal resminizden kırpmak ve yazıcının istenen sayıda piksele ölçeklenmesini sağlamaktır.

Ayrıca

İşte nasıl ... elle piksel ekleyebilirsiniz: Eğer pikselleri eklemeniz gerekirse

, hatta daha büyük olan ikinci bir tuval oluşturabilir ve ölçek drawImage ölçeklendirme sürümünü kullanın kırpılmış kısmı daha fazla. Orijinal görüntünüzün çözünürlüğü yazıcı çözünürlüğü değilse, bu tekniği kullanmanız gerekebilir.

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