Image Acquisition in Html5 and image acquisition in html5

Image Acquisition in Html5 and image acquisition in html5

Image Acquisition in Html5-Solving the Problem of texture inversion in WebGL

Beautiful Life of the sun and fire god (http://blog.csdn.net/opengl_es)

This article follows the "signature-non-commercial use-consistency" creation public agreement

Reprinted please keep this sentence: Sun huoshen's beautiful life-this blog focuses on Agile development and mobile and IOT device research: iOS, Android, Html5, Arduino, pcDuino, otherwise, this blog post is rejected or reprinted. Thank you for your cooperation.

I am waiting for the Web Front-end to solve this kind of problem!

Fortunately, some useful information can be found, as well as some image processing knowledge accumulated during the previous research on image inversion in UIKit, QuarzCore, and OpenGLES in iOS,

By organically combining these materials on the Internet, we can see a piece of code that is sufficient (at least for me.

Yesterday, the problem was solved after the image was reversed through photoshop. However, the images provided by people in the future cannot be converted by me,

In addition, when the code is not under my control, I have to explain some unreasonable nonsense, causing unnecessary trouble.

Simply eliminate the problem in the bud and try to stay away from the vortex.

An independent function. The input parameter is the image before the image, and the output parameter is the image after the image,

Currently, this function only supports horizontal and vertical images. You only need to change the scale and translate parameters accordingly. In this example, y is processed, the vertical image must process the x coordinate:

function mirrorImage(orgImage) {    var imageWidth = orgImage.width;    var imageHeight = orgImage.height;    var tempCanvas = document.createElement('canvas');    tempCanvas.width = imageWidth;    tempCanvas.height = imageHeight;    var context = tempCanvas.getContext("2d");    context.scale(1, -1);    context.translate(0, -imageHeight);    context.drawImage(orgImage, 0, 0);    var flipImage = context.getImageData(0, 0, imageWidth, imageHeight);    return flipImage;}

The call method is as follows:

Var backwalltex = three.imageutils.loadtexture('2's sub-idempotent image .jpg '); backwalltex. image = mirrorImage (backwalltex. image );

References:

Http://www.html5canvastutorials.com/advanced/html5-canvas-mirror-transform-tutorial/

Http://www.zeali.net/mirrors/html5canvastutorials/advanced/html5-canvas-transform-scale-tutorial/index.html

Http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

Hello, I want to teach you an html5 canvas problem: I drew multiple images in the canvas, including images and straight lines.

Canvas can be implemented
First, canvas must respond to mouse events (such as onmousedown)
Then, all images must create corresponding objects to record their locations and sizes, and zOrder (stacked positions, which determine who is on top when two objects overlap ), put the corresponding objects in an array and sort by zOrder
After the canvas mouse click event is triggered, the zOrder sequence is used to check that the mouse coordinates are not in the Area of an object. If the mouse coordinates are in the Area of an object, the corresponding function is executed.

You can use html5 or js functions or css to save images in a specific box as images.

Cannot be implemented.
Window. location. href = "image/octet-stream" is only used to open the acquired image data in a new window, And the browser automatically prompts you to download the image.
But where does the image data come from? Canvas in HTML5 supports pixel-level operations to obtain image data. However, a webpage is rendered with a lot of DOM and styles instead of an image, in JS, it cannot be converted into an image, unless the browser provides related APIs, but currently there is no similar API provided by the browser, so it cannot be implemented for the time being.
You can see that all the current ones are either browser-based or plug-ins must be installed.