एक जेपीजी फ़ाइल के रूप में सर्वर को कैनवास सहेजते समय डीपीआई कैसे बढ़ाएं?

Question

स्टैक ओवरफ्लो पर नया यहाँ। मैं एक समाधान पर काम कर रहा हूं, जहां मैं एक .jpg फ़ाइल के रूप में सर्वर पर jcrop का उपयोग कर एक फसल छवि को सहेज सकता हूं। छवि को घन सतह पर एक बनावट के रूप में भी प्रयोग किया जाता है (मैं इसके लिए तीन.जेएस का उपयोग कर रहा हूं)। मैं एक पेशेवर कोडर नहीं हूं, लेकिन मैंने सतह पर तस्वीर प्राप्त करने और सर्वर पर इसे सहेजने में कामयाब रहा है।

लेकिन दुर्भाग्यवश फाइलों में हमेशा एक 96 डीपीआई संकल्प होता है और इसकी गुणवत्ता खराब होती है (यहां तक ​​कि 2000 पीएक्स एक्स 2000 पीएक्स रिज़ॉल्यूशन के साथ)। मैंने एक समाधान खोजने की कोशिश की और मैं अभी भी कुछ और समकालीन खोजने की उम्मीद कर रहा हूं। मैंने उदाहरण के लिए toDataURLHD विधि के बारे में सुना। मैंने कोशिश की, लेकिन यह काम नहीं किया।

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

और पीएचपी हिस्सा:

यहाँ सर्वर अपलोड करने के लिए मेरी जावास्क्रिप्ट कोड है

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

} 

कोड काम करता है, मैं सर्वर पर छवि मिलता है, लेकिन गुणवत्ता खराब है :

Original Image

Cropped Image

क्या अधिक डीपीआई प्राप्त करने का कोई तरीका है?

संपादित करें:

मेरे कोड एक छोटे से जटिल के बाद से मैं बाहरी संसाधनों का इस्तेमाल किया है। उदाहरण के लिए कैनवास टैग "छुपा" था। यहां अपलोड प्रक्रिया का कुछ कोड भी है।

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> 

तो यहाँ मैं किसी भी कैनवस टैग नहीं पा सके। लेकिन मुझे पता है, यह उत्पन्न हुआ था, और मैंने इसे "Iconcontroller" फ़ंक्शन के भीतर .js फ़ाइल में पाया।

EDIT2:

मैं मैं हिस्सा है जहां मैं इसे संशोधित करना चाहिए पाया लगता है। मैंने canvas.width=img.width*300/96 विधि की कोशिश की, लेकिन कुछ काम नहीं करता है। हो सकता है कि कोड सही जगह पर न हो।

यहां पूरा कोड। RESIZING AND UPLOAD और update image canvas भागों के बाद देखो:

जावास्क्रिप्ट:

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

           } 
      }); 
     } 

मैं भी के बाद से वहाँ कुछ libaries कर रहे हैं, कोड के साथ एक ज़िप फ़ाइल बनाया। Here is the link.

EDIT3:

पता नहीं है जहां Marke से जवाब के लिए चला गया है, लेकिन वैसे भी। समाधान अच्छा था, मुझे उम्मीद है कि मैं इसे अपने कोड में लागू करने के लिए प्रबंधन करूँगा। आपके प्रयासों के लिए धन्यवाद, मैं वास्तव में इसकी सराहना करता हूं, क्योंकि मैं यहां नया हूं और मुझे कोई जवाब देने की भी उम्मीद नहीं थी। :)

Answer 1

पर्याप्त प्रिंटर रिज़ॉल्यूशन प्राप्त करने के लिए आपको अधिक पिक्सेल की आवश्यकता है।

एक ही रास्ता (Blindman67 का कहना है के रूप में) अपनी मूल छवि से फसल और पिक्सल की अपेक्षित संख्या के लिए प्रिंटर पैमाने-अप देना है।

आप मैन्युअल पिक्सल जोड़ सकते हैं ...

आइए जानें:

आप पिक्सल जोड़ने की जरूरत है, तो आप एक दूसरे कैनवास है कि भी बड़ा बना सकते हैं और पैमाने पर करने के drawImage की स्केलिंग संस्करण का उपयोग फसल का हिस्सा आगे। यदि आपकी मूल छवि का संकल्प प्रिंटर रिज़ॉल्यूशन नहीं है तो आपको इस तकनीक का उपयोग करने की आवश्यकता हो सकती है।

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