Холст и изображение конвертируют друг друга пример кода

Комментарий: Эта статья показывает, как преобразовать изображение в холст и как извлечь изображение. Пример кода заключается в следующем. Друзья с этой потребностью могут ссылаться на это. Я надеюсь, что это будет полезно для вас.

Оригинальная демонстрация: JavaScript Canvas Conversion Demo

На конференции Mozilla Web Development на прошлой неделе мы провели большую часть дня, обсуждая будущие рыночные приложения Mozilla. Instagram-самое популярное мобильное приложение, которое недавно было продано в Facebook по высокой цене в небо 1 миллиард долларов.

Я не против заработать дополнительные деньги, поэтому я решил создать приложение в стиле Instagram (поделитесь им позже)

Эта статья показывает, как преобразовать изображение в холст и как извлечь изображение.

Преобразовать изображение в холст

Чтобы преобразовать изображение в холст (Artboard, Canvas), вы можете использовать метод DrawMage контекста элемента Canvas:

// преобразовать изображение в объект Canvas

функция ConvertimageTocanvas (image) {

// Создать элемент Canvas DOM и установить его ширину и высоту так же, как и изображение

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

canvas.width = image.width;

Canvas.height = image.height;

// координаты (0,0) указывают на чертеж отсюда, который эквивалентен компенсации.

canvas.getContext ("2d"). DrawMage (Image, 0, 0);

вернуть холст;

}

Преобразовать холст в изображение

Предполагая, что изображение было обработано на холсте, вы можете использовать следующий метод для преобразования Canvas в объект изображения.

// Извлечение изображения из холста

функция ConvertCanvastoImage (Canvas) {

// новый объект изображения можно понять как DOM

var image = new Image ();

// canvas.todataurl возвращает строку кодированных URL -адресов BASE64. Конечно, сам браузер должен поддерживать его.

// Укажите формат png

image.src = canvas.todataurl ("image/png");

вернуть изображение;

}

Эм-м-м! Преобразование изображений изображений и холста проще, чем вы думаете. В будущем я продемонстрирую вам различные технологии обработки изображений. Я считаю, что вы обязательно заработаете много денег с этими технологиями в будущем.