डेटा URL से कैनवास पर एक चित्र बनाना

Question

मैं एक कैनवस में एक छवि कैसे खोल सकता हूं? जो एन्कोडेड है

मैं उपयोग कर रहा हूं

var strDataURI = oCanvas.toDataURL(); 

आउटपुट एनकोडेड बेस 64 इमेज है। मैं इस चित्र को कैनवास पर कैसे खींच सकता हूं?

मैं strDataURI छवि का उपयोग करना और बनाना चाहता हूं ? क्या यह घटिया है?
यदि यह नहीं है, तो संभवतः एक कैनवास पर छवि को लोड करने के लिए क्या समाधान हो सकता है?

Comments

इसका इस मामले में काम नहीं करना :: jsfiddle.net/V92Gn/5376

— arqam

Answer 1

डेटा URL को देखते हुए, आप srcछवि को अपने डेटा URL में सेट करके एक छवि (पेज पर या विशुद्ध रूप से JS में) बना सकते हैं । उदाहरण के लिए:

var img = new Image;
img.src = strDataURI;

एचटीएमएल 5 कैनवस कॉन्सेप्ट की drawImage()विधि आपको एक कैनवास पर सभी या एक छवि (या कैनवास, या वीडियो) के एक हिस्से को कॉपी करने देती है।

आप इसे इस तरह उपयोग कर सकते हैं:

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;

संपादित करें : मैंने पहले इस स्पेस में सुझाव दिया था कि onloadडेटा URI शामिल होने पर हैंडलर का उपयोग करना आवश्यक नहीं हो सकता है । इस प्रश्न से प्रयोगात्मक परीक्षणों के आधार पर , ऐसा करना सुरक्षित नहीं है। उपरोक्त अनुक्रम- छवि बनाएं, onloadनई छवि का उपयोग करने के लिए सेट करें , और फिरsrc निश्चित रूप से परिणामों का उपयोग करने के लिए कुछ ब्राउज़रों के लिए आवश्यक सेट करें ।

Comments

ऑनलोड हैंडलर का उपयोग करना निश्चित रूप से एक अच्छा विचार है। छवि को लोड करने में थोड़ा समय लग सकता है इसलिए इसे सुरक्षित रूप से चलाना बेहतर है। :)

— जुहो वेपसलेन

@bebraw आइए यह सुनिश्चित करने के लिए के बारे में देखें: stackoverflow.com/questions/4776670/... :)

— Phrogz

@Phrogz यह मुझे एक त्रुटि देता है: var ctx = myCanvas.getContext ('2d'); परीक्षण के लिए अपने कोड को कॉपी / अतीत करें

— जेपर बर्नार्डिनो

@jepser क्या आपके पास canvasउस आईडी के साथ आपके पृष्ठ पर एक तत्व है? क्या आपने सुनिश्चित किया है कि myCanvasअशक्त नहीं है? यदि आपको अभी भी परेशानी है, तो अपना प्रश्न पोस्ट करें, या जावास्क्रिप्ट चैट चैनल पर आएं ।

— फ़रोग्ज़

@DavidMurdoch महान जानकारी। क्या आपके पास एक क्रोमियम बग है जिसे आप लिंक कर सकते हैं, ताकि उपयोगकर्ताओं को पता चल जाए कि उपरोक्त कथन अब सच नहीं है?

— फ्रॉग्ज

Answer 2

function drawDataURIOnCanvas(strDataURI, canvas) {
    "use strict";
    var img = new window.Image();
    img.addEventListener("load", function () {
        canvas.getContext("2d").drawImage(img, 0, 0);
    });
    img.setAttribute("src", strDataURI);
}

Answer 3

शायद इस फिडल को ThumbGen - jsFiddle में मदद मिलेगी, यह फ़ाइल एपीआई और कैनवस का उपयोग गतिशील रूप से छवियों के थंबनेल उत्पन्न करने के लिए करता है।

(function (doc) {
    var oError = null;
    var oFileIn = doc.getElementById('fileIn');
    var oFileReader = new FileReader();
    var oImage = new Image();
    oFileIn.addEventListener('change', function () {
        var oFile = this.files[0];
        var oLogInfo = doc.getElementById('logInfo');
        var rFltr = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i
        try {
            if (rFltr.test(oFile.type)) {
                oFileReader.readAsDataURL(oFile);
                oLogInfo.setAttribute('class', 'message info');
                throw 'Preview for ' + oFile.name;
            } else {
                oLogInfo.setAttribute('class', 'message error');
                throw oFile.name + ' is not a valid image';
            }
        } catch (err) {
            if (oError) {
                oLogInfo.removeChild(oError);
                oError = null;
                $('#logInfo').fadeOut();
                $('#imgThumb').fadeOut();
            }
            oError = doc.createTextNode(err);
            oLogInfo.appendChild(oError);
            $('#logInfo').fadeIn();
        }
    }, false);
    oFileReader.addEventListener('load', function (e) {
        oImage.src = e.target.result;
    }, false);
    oImage.addEventListener('load', function () {
        if (oCanvas) {
            oCanvas = null;
            oContext = null;
            $('#imgThumb').fadeOut();
        }
        var oCanvas = doc.getElementById('imgThumb');
        var oContext = oCanvas.getContext('2d');
        var nWidth = (this.width > 500) ? this.width / 4 : this.width;
        var nHeight = (this.height > 500) ? this.height / 4 : this.height;
        oCanvas.setAttribute('width', nWidth);
        oCanvas.setAttribute('height', nHeight);
        oContext.drawImage(this, 0, 0, nWidth, nHeight);
        $('#imgThumb').fadeIn();
    }, false);
})(document);

Answer 4

नई छवि सेट करने से पहले आप पुरानी छवि को साफ़ कर सकते हैं।

आपको एक नई छवि के लिए कैनवास आकार को अपडेट करने की भी आवश्यकता है।

यह मैं अपनी परियोजना में कर रहा हूं:

    // on image load update Canvas Image 
    this.image.onload = () => {

      // Clear Old Image and Reset Bounds
      canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.canvas.height = this.image.height;
      this.canvas.width = this.image.width;

      // Redraw Image
      canvasContext.drawImage(
        this.image,
        0,
        0,
        this.image.width,
        this.image.height
      );
    };

Answer 5

जावास्क्रिप्ट में, कैनवास आईडी चयन के लिए jquery का उपयोग कर:

 var Canvas2 = $("#canvas2")[0];
        var Context2 = Canvas2.getContext("2d");
        var image = new Image();
        image.src = "images/eye.jpg";
        Context2.drawImage(image, 0, 0);

एचटीएमएल 5:

<canvas id="canvas2"></canvas>

Comments

यह ओपी के डेटाुरल से संबंधित प्रश्न का उत्तर नहीं देता है।

— मेंढक

आप कैनवास का चयन करने के लिए jQuery का उपयोग क्यों करेंगे? क्या डॉक्यूमेंट टाइप करना .getElementById () बहुत अधिक काम है?

— स्कॉट

यह कोड काम करता है, हालांकि यह सवाल से संबंधित नहीं है

— मोहम्मद अशफाक