التعليق: يوضح لك هذه المقالة كيفية تحويل الصورة إلى قماش ، وكيفية استخراج صورة. رمز العينة كما يلي. الأصدقاء مع هذه الحاجة يمكن أن يشير إليها. آمل أن يكون ذلك مفيدًا لك.
قماشية JS والصورة تحويل بعضها البعضالعرض التجريبي الأصلي: عرض تحويل صورة 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") ؛
إرجاع الصورة ؛
}
أوه! تحويل صور الصور والقطن أسهل مما تعتقد. في المستقبل ، سأعرض لك تقنيات معالجة الصور المختلفة لك. أعتقد أنك ستحقق الكثير من المال مع هذه التقنيات في المستقبل.