使用webSocket实现移动端与PC端传输图片

使用webSocket实现移动端与PC端传输图片

        需求：我需要把移动端的一个base64图片传到PC端后，由PC端上传第三方接口，得到第三方接口返回的一个合成文件。 

        下面是我历经千辛万苦后得到的流程结果，我会按照下面如图顺序介绍每一个步骤

 我好苦呀

下面开始介绍：

一.获取base64

        这里实际是获取电子签名的base64，总之就是拿到一个base64

二.转文件流上传图片

        里面的上传图片实际是调用接口，fd已经是可直接上传的formData了

        更详细可看：base64转formdata上传图片_shihezhengshz的博客-CSDN博客

// base64转formdata
base64ToFormdata(base64Data){const data = window.atob(base64Data.split(',')[1]);const ia = new Uint8Array(data.length);for (let i = 0; i < data.length; i++) {ia[i] = data.charCodeAt(i);}const blob = new Blob([ia], { type: 'image/png' });const fd = new FormData();fd.append('multipartFile', blob, new Date().getTime() + '.png');// 上传图片this.upload(fd)
}

三.获取文件地址

        我调用后端上传文件接口后，后端会返回给我一个存到服务器里的文件地址

四.传文件地址

        此处有：注意点B

        这个就是使用webSocket将信息，从移动端传到PC端，这里webSocket实际上就是聊天室思想，即A链接传信息给B链接。

 五.文件地址获取图片转base64

        此处有：注意点C

// 获取到一个canvas的url叭
getBase64Image(img) {var canvas = ateElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = Context("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();var dataURL = DataURL("image/"+ext);return dataURL;
},
// 图片地址转为base64
imgUrlTransformationForBase64(imgUrl){var image = new Image();image.width = 200;image.height = 200;// 设置跨域image.setAttribute("crossOrigin",'Anonymous')// 服务器地址image.src = "192.168.0.18:7012"+load = () => {this.base64 = Base64Image(image);}return this.base64
},

 原文链接：

.htm.htm

下面是我在实现这套流程时遇到的问题，以下包含---问题+心路历程（可跳过）+解决方案：

A注意点：《webSocket：兄弟，你这个base64，有亿点点长鸭》

心路历程：刚开始遇到问题，是因为webSocket “不稳定”，也就是传输数据的时候经常会断开连接，但偶尔又能成功，因为这时候是我第二次写webSocket，也没想到解决方案，百度了好一会儿，才知道webSocket还有Code码！哇！

解决方案：webSocket报code1009，即数据量过大，也就是你的base64太长了，传不了，这就衍生了我使用地址传输的方案，也就有了下一个问题。

原文链接：://segmentfault/a/1190000014582485

 B注意点：《webSocket：“听说，你传了个地址？”》

心路历程：传地址……传地址……明明挺快乐的事儿，结果期待着，好长时间收不到webSocket的消息，一看，好家伙，链接又断了，一看code，1002~emmmm~上网一查，自己一想，喔~是链接里面的   /   出问题了。

解决方案：string.split('/').join('-')，之后传过去再 string.split('-').join('/')转回来，其中string就是地址了

C注意点： 《Canvas：谁污染了我，我又污染了谁？》

 心路历程：一张图，足矣。

解决方案：设置跨域

var image = new Image();
// 设置跨域
image.setAttribute("crossOrigin",'Anonymous')

 原文链接：Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported - 范仁义 - 博客园Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted.html