JS绘制图片的两种方法

水滴与鱼

于 2024-04-27 19:42:54 发布

阅读量290

点赞数 3

文章标签：笔记 javascript

本文链接：https://blog.csdn.net/garyaofq/article/details/138256346

版权

主要功能：1.上传图片转base64，转好后到控制面板复制;2.webgl绘图；3.2d画布绘图

直接上代码：

<html>
<head>

</head>
<body>
<input type="file" id="fileInput">
<div><img src="" alt="" id="svgBox" width="500"></div>

<div>
    <canvas id="canvas" height="772" width="1621"></canvas>
	<canvas id="mycanvas" height="772" width="1621"></canvas>
</div>
<script>


	function convertImageToBase64(file) {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = () => resolve(reader.result);
			reader.onerror = error => reject(error);
		});
	}
	
	let fileInput = document.getElementById('fileInput');
	fileInput.addEventListener('change', (e) => {
		let file = e.target.files[0];
		convertImageToBase64(file)
			.then(base64 => {
				console.log(base64);
			})
			.catch(error => {
				console.error(error);
			});
	});

	let vertexs=new Float32Array([
		-1, 1, 0.0, 0.0, 1.0,
		-1, -1, 0.0, 0.0, 0.0,
		1, 1, 0.0, 1.0, 1.0,
		1, -1, 0.0, 1.0, 0.0]);
	let vertexShaderSource='attribute vec4 a_Position;'+
                'attribute vec2 a_TexCoord;'+
                'varying vec2 v_TexCoord;'+
                'void main(){'+
                'gl_Position = a_Position;'+
                'v_TexCoord = a_TexCoord;'+
            '}';
    let fragmentShaderSource= 'precision mediump float;'+
                'uniform sampler2D u_Sampler;'+
                'varying vec2 v_TexCoord;'+
                'void main(){'+
                    'gl_FragColor = texture2D(u_Sampler, v_TexCoord);'+
            '}';
	let canvas = document.getElementById('canvas');
	let gl = canvas.getContext('webgl');
	let image = new Image();
	
	function initShader() {
      let vertexShader = gl.createShader(gl.VERTEX_SHADER);// 创建顶点着色器
      gl.shaderSource(vertexShader, vertexShaderSource);// 绑定顶点着色器源码
      gl.compileShader(vertexShader);// 编译定点着色器


      let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 创建片元着色器
      gl.shaderSource(fragmentShader, fragmentShaderSource);// 绑定片元着色器源码
      gl.compileShader(fragmentShader);// 编译片元着色器

      let shaderProgram = gl.createProgram();// 创建着色器程序
      gl.attachShader(shaderProgram, vertexShader);// 指定顶点着色器
      gl.attachShader(shaderProgram, fragmentShader);// 指定片元着色色器


      gl.linkProgram(shaderProgram);// 链接程序
      gl.useProgram(shaderProgram);//使用着色器
      gl.program = shaderProgram;
      return true
    };
	
	function initVertexs() {

      let vertexsBuffer = gl.createBuffer();


      if (vertexsBuffer === null) {
        console.log("vertexsBuffer is null");
        return false;
      }
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexsBuffer);


      gl.bufferData(gl.ARRAY_BUFFER, vertexs, gl.STATIC_DRAW);

      let a_Position = gl.getAttribLocation(gl.program, "a_Position");
      if (a_Position < 0) {
        console.log("a_Position < 0");
        return false;
      }

      let a_TexCoord = gl.getAttribLocation(gl.program, "a_TexCoord");
      if (a_TexCoord < 0) {
        console.log("a_TexCoord < 0");
        return false;
      }

      //将顶点坐标的位置赋值
      gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, vertexs.BYTES_PER_ELEMENT * 5, 0);
      gl.enableVertexAttribArray(a_Position);

      //将纹理坐标赋值
      gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, vertexs.BYTES_PER_ELEMENT * 5, vertexs.BYTES_PER_ELEMENT * 3);
      gl.enableVertexAttribArray(a_TexCoord);

      return true;
    };
	
	function initTextures() {

      let textureId = gl.createTexture(); //创建纹理对象

      if (textureId === null) {
        console.log("textureId is null");
        return false;
      }


      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // 对纹理图像进行y轴反转
      gl.activeTexture(gl.TEXTURE0); // 开启0号纹理单元
      gl.bindTexture(gl.TEXTURE_2D, textureId); // 向target绑定纹理对象
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // 配置纹理参数
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); // 配置纹理图像

      let u_Sampler = gl.getUniformLocation(gl.program, "u_Sampler");
      if (u_Sampler < 0) {
        console.log("u_Sampler < 0");
        return false;
      }
      gl.uniform1i(u_Sampler, 0); // 将0号纹理传递给着色器

      return true
    };
	
	function renderImage() {
      if (!initShader()) {
        console.log('initShader is failed')
        return;
      }
      if (!initVertexs()) {
        console.log('drawVertexs is failed')
        return;
      }
      if (!initTextures()) {
        console.log('drawTextures is failed')
        return;
      }
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
	  
    };
	
	//1.webgl绘制图片,图片转换为base64格式，这里因为字数限制省略了部分
	image.src="data:image/png;base64,iVBORw0K......m8AAAAASUVORK5CYII=";
	image.setAttribute("crossOrigin", 'Anonymous')
	image.title = '123456.png';
	canvas.append(image);
	image.onload = renderImage;
	//2.画布绘制图片
	var mycanvas = document.getElementById('mycanvas');
	var ctx=mycanvas.getContext('2d');
	var img=new Image();
	img.src=image.src;
	img.titl=image.title;
	img.onload = function() {
    // 当图片加载完成后，绘制图片到canvas上
    // 绘制图片到canvas上，并指定缩放比例
		ctx.drawImage(img, 0, 0, img.width * 0.1, img.height * 0.1);
	};
</script>
</body>
</html>

效果：