郑州 网站建设,WordPress文章图片采集插件,阿里云wordpress 安装目录,公司有些网站打不开关于 Cloud Studio Cloud Studio 是基于浏览器的集成式开发环境(IDE)#xff0c;为开发者提供了一个永不间断的云端工作站。用户在使用Cloud Studio 时无需安装#xff0c;随时随地打开浏览器就能在线编程。 Cloud Studio 作为在线IDE#xff0c;包含代码高亮、自动补全、Gi…关于 Cloud Studio Cloud Studio 是基于浏览器的集成式开发环境(IDE)为开发者提供了一个永不间断的云端工作站。用户在使用Cloud Studio 时无需安装随时随地打开浏览器就能在线编程。 Cloud Studio 作为在线IDE包含代码高亮、自动补全、Git集成、终端等IDE 的基础功能同时支持实时调试、插件扩展等可以帮助开发者快速完成各种应用的开发、编译与部署工作。 IDE(Integrated Development Environment ) 作为码农生产力的重要组成部分相信很多伙伴都用过不少相关的产品。那么不用下载和安装的 IDE你之前有体验过吗
本篇博文将从作者参与 Cloud Studio 实战训练营的亲身体会出发带领你一步步揭开Cloud Studio 的神秘面纱。
第一步注册
点开这里先去右上角注册。 如果大家有 github 的账号那么我推荐你使用 github 来注册这样你编写好的代码可以一键保存到 github 上。 如果没有 github 账号可以先去注册“CODING DevOps”然后使用“CODING DevOps”账号登录。 第二步创建自己的工作空间
登录好以后先点击左下角新建工作空间。 在跳转的页面中可以配置你的项目将要托管到哪个服务商这里支持 coding 和 github 因为最开始推荐大家使用 github 登录所以这里选择 github就会自动同步github 中的团队和项目 是不是很方便。
当然 Cloud Studio 提供了茫茫多的模板我们可以不创建工作空间而是从中选择自己熟练的技术栈打开也可以的。 这里需要注意一点通过空间模版创建的项目默认没有连接 git 仓库。 所以你要自己手动执行 git init、git remote add origin address、git add .、git commit 以及git push等操作。 选择模板以后项目会自动运行起来第一步是配置运行环境这一点和本地的 IDE 有明显的区别。 等环境跑完了你就能得到一个在浏览器中运行的 vscode ps: 笑脸 当然这也可以理解毕竟 cloud studio 主打一个在线编辑所以采用什么外观无非套壳子没必要重复造车轮对吧。
第三步编写实战训练代码
老规矩哈先体验一把捣蛋鬼向你推送了体验地址 这个小 demo 主要实现了两个功能:
上传头像将上传的头像通过 canvas 重绘为黑白风格并付给 a 链接这样用户就可以点击下载
整体实现的逻辑并不复杂核心的逻辑大概是这样
通过设置 input 的属性 type 为 file来获取上传的头像绘制一个静态的 canvas 到页面上用来当作画布使用 canvas 的 drawImage 方法将获取的头像绘制到画布上使用 canvas 的 getImageData 方法获取画布中头像图片的像素遍历得到的所有的像素计算每个像素的灰度值根据得到的灰度值大小将每个像素点的 rgb 设置为 0 或者 255将转换后的像素点通过 putImageData 方法重新绘制到画布上通过 canavs 的 toDataURL 方法将图片转换为 base64 的字符串将 base64 字符串赋值给携带 download 属性的 a 标签从而实现点击下载
现在我们已经初步知道了实现的逻辑那就开始编写代码吧。
配置 App.vue
script setup
import { onMounted } from vue;onMounted((){// 获取元素var canvas document.getElementById(canvas);var ctx canvas.getContext(2d);var uploadBtn document.getElementById(uploadBtn);// 监听文件上传事件uploadBtn.addEventListener(change, function(e) {var file e.target.files[0];// 创建图像对象var img new Image();img.onload function() {// 将图像绘制到画布上ctx.drawImage(img, 0, 0, canvas.width, canvas.height);// 应用卡通效果applyCartoonEffect();};img.src URL.createObjectURL(file);});// 应用卡通效果function applyCartoonEffect() {// 获取画布的像素数据var imageData ctx.getImageData(0, 0, canvas.width, canvas.height);var data imageData.data;// 遍历每个像素点for (var i 0; i data.length; i 4) {// 获取像素点的RGB值var r data[i];var g data[i 1];var b data[i 2];// 计算灰度值var gray (r g b) / 3;// 将像素点转换为卡通效果即将灰度值处理为0或255if (gray 128) {data[i] data[i 1] data[i 2] 0; // 设置为黑色} else {data[i] data[i 1] data[i 2] 255; // 设置为白色}}// 将处理后的像素数据重新绘制到画布上ctx.putImageData(imageData, 0, 0);var downloadLink document.getElementById(downloadLink);downloadLink.href canvas.toDataURL(); // 默认为PNG格式}
})/scripttemplatemaindiv classwrapperinput typefile iduploadBtn acceptimage/*a iddownloadLink href# downloadcartoon_avatar.png下载/a/divcanvas idcanvas width300 height300/canvas/main
/templatestyle scoped
canvas {border: 1px solid #000;
}
.wrapper{width: 300px;
}
/style写完后就可以在右边的预览中实验效果这样一个有趣的小 demo 就实现了。
最后点击右侧的源代码管理就可以提交代码然后把代码上传到 github 大功告成 。 项目地址 https://github.com/qingtiantongxie/vue3-canvas
欢迎各路英雄好汉积极提出意见和问题。
训练营实战总结
优点与未来
不得不承认对于开发而言cloud studio 简直就是生产力大解放。
程序员可以通过浏览器访问和开发项目无需在本地设置开发环境这样就能省去70%的烦恼。回家加班的时候你再也不用背着沉重的电脑放假远游的时候也不必担心项目出问题不能调试。笔记本不再是编程的局限虽然很多人也在使用诸如 ipad 等但是当编辑器node环境python版本数据库redis等等等等不再成为你的困扰大胆想象或许某天在午后的阳光下坐在软软的沙发上手机投屏就可以轻松完成日常的开发任务简直美到飞起。对于后端而言所见即所得。cloud studio 可以轻松构建、测试和部署应用程序开发的生产环境和部署的线上环境无缝衔接还需要担心环境问题导致的部署失败吗团队模式简直是太香了。以往的团队开发都体现在 gitlab、tapd、apiFox 等等实际上跟开发的工作本身一点关系都没有的工具上而开发工具从来不知道团队为何物。而线上IDE最大的优点就是实现了团队共享。你看所有的团队概念的东西都部署在线上。同一团队的开发者们可以共享代码、调试问题并在代码上进行实时注释和反馈提升团队的工作效率和沟通效果。完美解决了 IDE 版本与系统不兼容的问题。对于初学编程的人而言cloud studio 更是一大福音跨设备跨地点跨空间的特性可以极大提升学习的效率而且cloud studio 的自动构建开发环境自动检测和生成开发环境可以在学习编程或更换编辑器时减少大量时间成本。
总之一句话虽然在线 IDE 炒了许多年但我觉得 cloud studio 才是那“在月亮上迈出的第一步”。
不足和担忧
金无足赤人无完人任何一款好的产品想要真正成熟都要经历不断的打磨。cloud studio 也有一些不足之处等待解决。
三种登录方式每一种注册后都要重新实名认证极为繁琐不便。通过实名制的手机号可以关联用户数据让用户数据在不同账号下能保持统一或自由选择。项目运行起来后回到首页再次点击该项目会重开运行环境。其实这时候可以提示用户让用户来决定接下来如何操作。项目运行中偶尔会出现意外错误如图所示希望能排查。 在线 IDE 最大的弊端在于极强的依赖于网络如果网络延迟或者服务器通信不稳定会使开发工作得不偿失。安全性的需求增加了以往只要防止代码托管平台的源码泄漏现在则要面临开发环境的源码泄漏问题。对于一些特定的企业在线IDE可能引发敏感项目和保密项目的数据泄漏。
