मैं जावास्क्रिप्ट ढांचे या किसी जेएस कोड के लिए उच्च और निम्न देख रहा हूं जो मुझे फ्लाई पर एक जेपीजी या पीएनजी छवि बनाने की अनुमति देगा, लेकिन मुझे कोई भी नहीं मिल रहा है। मुझे एक चयनित पृष्ठभूमि रंग, उपयोगकर्ता द्वारा दर्ज किए गए टेक्स्ट शब्द, एक चयनित फ़ॉन्ट और फिर एक चयनित टेक्स्ट रंग का उपयोग करके एक छवि बनाने की आवश्यकता है। एक बार छवि बनने के बाद मुझे इसे वर्तमान एचटीएमएल फॉर्म पेज जोड़ने की जरूरत है, और फिर फॉर्म जमा होने पर छवि को मेरे सर्वर पर पास कर दें। लेकिन मुझे जो कुछ मिल रहा है वह मौजूदा छवि में हेरफेर करने के लिए सामान है, तो क्या मेरा अनुरोध भी संभव है?

मुझे पता है कि मैं एक छवि बना सकता हूं और इसे निम्न की तरह कुछ का उपयोग करके मौजूदा पृष्ठ पर जोड़ सकता हूं:

$('#container').append($('<img>', { 
    src : "/path/to/image.jpg", 
    width : 16, 
    height : 16, 
    alt : "Test Image", 
    title : "Test Image"
}));

या....

var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);

लेकिन उन दोनों विकल्पों में मौजूदा छवि का उपयोग करने की आवश्यकता है .... मुझे खरोंच से पूरी तरह से एक नई छवि बनाने में सक्षम होना चाहिए।

0
rolinger 26 जिंदा 2022, 19:06
3
आप शायद एक कैनवास चाहते हैं - पर SO के बहुत सारे प्रश्न देखें एक छवि में कैसे परिवर्तित करें।
 – 
freedomn-m
26 जिंदा 2022, 19:20
@ स्वतंत्रता-एम - धन्यवाद। मैंने पहले कैनवास ऑब्जेक्ट के बारे में नहीं सुना है। मेरे सारे पढ़ने ने उसे चालू नहीं किया। मुझे समझ में नहीं आता कि इसे दो बार वोट क्यों दिया गया। यह एक कानूनी सवाल है - लोग चीजों को वोट देते हैं क्योंकि वे मानते हैं कि मुझे कुछ पता होना चाहिए (जैसे canvas), लेकिन स्पष्ट रूप से प्रश्न पोस्ट करने का तात्पर्य है कि मैं नहीं करता।
 – 
rolinger
26 जिंदा 2022, 19:24

2 जवाब

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

कैनवास एपीआई के लिए एक उपयोगी संसाधन यहां है:https://developer। mozilla.org/en-US/docs/Web/API/Canvas_API

और एक ट्यूटोरियल यहाँ है: https://developer.mozilla.org/en-US/ डॉक्स/वेब/एपीआई/कैनवास_एपीआई/ट्यूटोरियल

function drawHelloWorld(canvas) {
    const ctx = canvas.getContext("2d");
    
    // Draw the background
    ctx.rect(0, 0, 250, 100);
    ctx.fillStyle = "green";
    ctx.fill();
 
    // Draw the text
    ctx.font = "30px Helvetica";
    ctx.fillStyle = "ghostwhite";
    ctx.fillText("Hello World", 50, 60);
}

const canvas = document.getElementById('myCanvas');
drawHelloWorld(canvas);

const imgElement = document.createElement('img');
imgElement.src = canvas.toDataURL('image/jpeg');
document.getElementById('container').appendChild(imgElement);
<canvas hidden id="myCanvas" width="250" height="100" style="border:1px solid #d3d3d3;">
</canvas>

<div id="container">
</div>
2
Terry Lennox 26 जिंदा 2022, 19:53
1
दोहरा धन्यवाद! मुझे नहीं पता था कि canvas इस पोस्ट तक मौजूद थे। मेरी सभी Google खोजों ने छवि जोड़तोड़ को लाया या किसी मौजूदा छवि से एक छवि बनाई।
 – 
rolinger
26 जिंदा 2022, 19:53
उम्मीद है कि यह आपको अपनी परियोजना के साथ थोड़ा और आगे ले जाएगा!
 – 
Terry Lennox
26 जिंदा 2022, 19:54

आप JavaScript कैनवास का उपयोग करके एकदम से एक नई छवि बना सकते हैं।

कुछ इस तरह:

<canvas id=canvas width=500 height=500></canvas>
<script>
     window.onload = function() {
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        // This fills the background
        ctx.fillStyle = "green";
        ctx.fillRect(0, 0, 500, 500);

        // Add text with spesific font
        ctx.font = 'bold 48px serif';
        ctx.strokeText('Made on Fly!', 50, 100);

        // Make canvas to data URI
        const dataUrl = canvas.toDataURL("image/png");
        // Here you can convert dataUrl to base64 and use it for other purposes

        const aDoc = document.createElement("a");
        aDoc.href = dataUrl;
        aDoc.download = "Made_on_fly.png";
        document.body.appendChild(aDoc);
        // Make a element click for download
        aDoc.click();
     }
</script>
1
Somepub 26 जिंदा 2022, 19:43
1
धन्यवाद! एक बार @ फ्रीडम-एम ने ओपी को canvas के बारे में टिप्पणी की, मैंने तुरंत इसे देखा और देखा कि यह वही है जो मैं ढूंढ रहा हूं। मुझे नहीं पता था कि यह अस्तित्व में था।
 – 
rolinger
26 जिंदा 2022, 19:51