القماش والصورة يحولان كل رمز عينة أخرى

التعليق: يوضح لك هذه المقالة كيفية تحويل الصورة إلى قماش ، وكيفية استخراج صورة. رمز العينة كما يلي. الأصدقاء مع هذه الحاجة يمكن أن يشير إليها. آمل أن يكون ذلك مفيدًا لك.

العرض التجريبي الأصلي: عرض تحويل صورة JavaScript Canvas

في مؤتمر Mozilla Web Development في الأسبوع الماضي ، انتهى بنا الأمر إلى قضاء معظم اليوم في مناقشة تطبيقات سوق Mozilla المستقبلية. Instagram هو تطبيق الهاتف المحمول الأكثر شعبية مؤخرًا ، ويبيعه على Facebook بسعر أعلى من مليار دولار.

لا مانع من كسب بعض المال الإضافي ، لذلك قررت إنشاء تطبيق على طراز Instagram (سيشاركه لاحقًا)

توضح لك هذه المقالة كيفية تحويل الصورة إلى قماش وكيفية استخراج صورة.

تحويل الصورة إلى قماش

لتحويل صورة إلى قماش (Artboard ، قماش) ، يمكنك استخدام طريقة DrawImage لسياق عنصر القماش:

// تحويل الصورة إلى كائن قماش

وظيفة convertimagetocanvas (صورة) {

// قم بإنشاء عنصر DOM قماش وضبط عرضه وارتفاعه مثل الصورة

var canvas = document.createElement ("canvas") ؛

canvas.width = image.width ؛

canvas.height = Image.Height ؛

// الإحداثيات (0،0) تشير إلى الرسم من هنا ، وهو ما يعادل الإزاحة.

canvas.getContext ("2d"). drawImage (صورة ، 0 ، 0) ؛

قماشية إرجاع.

}

تحويل قماش إلى الصورة

على افتراض أن الصورة قد تمت معالجتها على القماش ، يمكنك استخدام الطريقة التالية لتحويل قماش إلى كائن صورة صورة.

// استخراج الصورة من قماش

وظيفة convertCanvastoimage (قماش) {

// يمكن فهم كائن الصورة الجديد على أنه DOM

var image = new image () ؛

// canvas.todataurl إرجاع سلسلة من عناوين URL Base64 المشفرة. بالطبع ، يجب أن يدعم المستعرض نفسه.

// حدد التنسيق PNG

Image.src = canvas.todataurl ("Image/PNG") ؛

إرجاع الصورة ؛

}

أوه! تحويل صور الصور والقطن أسهل مما تعتقد. في المستقبل ، سأعرض لك تقنيات معالجة الصور المختلفة لك. أعتقد أنك ستحقق الكثير من المال مع هذه التقنيات في المستقبل.