One of the highlights of Steemit UI is the image upload feature which makes users’ life much easier. I did some experiments to implement a similar function by using HTML5 clipboard API. In the end of this post, I also have some thoughts on how the Steemit image features can be improved.
估计很多使用Steemit的朋友都非常喜欢它的自动图片上传功能，只需要复制并粘贴到文本框中就可以了，图片会被自动上传到Steemit图床并返回相应的图片markdown代码。下面和大家分享一下如何使用HTML5来实现类似的功能。同时也和大家分享我对Steemit图片服务的想法。
First, create an HTML file, together with javascript and css stylesheet:
首先把下面的代码保存到一个HTML文件中：
<html>
<head>
<style>
.pastebox {
background: lightgreen;
border-style: dashed;
width: 400px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("pasteDiv").addEventListener("paste", pasteHandler);
};
function pasteHandler(e) {
var items = e.clipboardData.items;
for (var i = 0 ; i < items.length ; i++) {
var item = items[i];
if (item.type.indexOf("image") >=0) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status == 200) {
console.log("uploaded.");
} else {
console.log("oops, something wrong.")
}
};
xhr.onerror = function() {
console.log("cannot connect to server.");
};
xhr.open("POST", "/servlet/upload", true);
xhr.setRequestHeader("Content-Type", item.getAsFile().type);
xhr.send(item.getAsFile());
} else {
console.log("Ignoring non-image.");
}
}
}
</script>
</head>
<body>
<div class="pastebox" id="pasteDiv">
Paste image here.
</div>
</body>
</html>
The server side Java code to receive and process pasted image data:
在服务器端需要处理图片的上传请求，我这里用Java代码实现的：
String fileName = "/tmp/" + UUID.randomUUID() + ".png";
InputStream in = request.getInputStream();
FileOutputStream o = null;
try {
File f = new File(fileName);
o = new FileOutputStream(f);
byte buffer[] = new byte[1024 * 1024];
int n;
while ((n = in.read(buffer)) != -1) {
o.write(buffer, 0, n);
}
} catch (IOException e) {
// error handling code
} finally {
o.close();
in.close();
}
Now, just copy an image into clipboard and click the green area in the page and press ”Ctrl + V”，the image will be uploaded to server. The above code can be slightly tweaked to get the generated image file URL and display the image in the page.
这样，只要复制一个图片到剪切板，然后单击网页中的绿色区域，在按下”Ctrl + V”，图片就会自动上传到服务器了。程序代码需要再稍作修改就可以在页面中拿到新生成图片的地址并显示了。
To me, the main issue is the slowness of the image loading time, some posts contain dozens of images which slows down the page rendering time. Here are some thoughts to improve:
对我来说，最主要的问题就是图片加载有些慢，下面是我的一些想法：
- First, optimize all images right after they are uploaded. I have randomly picked up some Steemit post images and their size can be reduced by 20% by optipng.
- Second, create dissemination APIs to provide different size images so user can choose which version they want to use.
- A preview image can be used in the post display rather than the original image.
首先，在上传图片的同时自动优化图片。其次，提供一个API能动态提供给用户不同尺寸的API。还有就是应该在文章中使用一个尺寸相对小些的预览图，而不是原图。
Above is just my thoughts
这只是我自己的想法，欢迎大家指正。
https://steemit.com 首发。非常感谢阅读，欢迎FOLLOW, Resteem和Upvote 