图片编辑不显示图片_在线编辑图片

weixin_39866974

于 2021-01-14 11:20:21 发布

阅读量113

点赞数

文章标签：图片编辑不显示图片

本文链接：https://blog.csdn.net/weixin_39866974/article/details/112685145

版权

1 效果图

点击 “Edit Photo” 按钮，查看效果图

2 实现

复制下面代码，保存为html文件

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>图片编辑title>     <script src="https://code.jquery.com/jquery-1.7.2.js">script>    <script src="https://dme0ih8comzn4.cloudfront.net/js/feather.js">script>    <script type='text/javascript'>                //在线编辑图片功能，第三方插件，完全免费        var featherEditor = new Aviary.Feather({            apiKey: '121285904@qq.com',//apikey可以免费申请，https://creativesdk.adobe.com/docs/web/#/index.html            apiVersion: 3,            theme: 'dark', // Check out our new 'light' and 'dark' themes!            tools: 'all',//这里设置为all，可以显示所有的工具            initTool: 'text',//默认展开的工具            language: 'zh_HANS',//简体中文            appendTo: '',                      onSave: function (imageID, newURL) {                                //alert(newURL);                $.ajax({                    url: "ashx/CarInfo.ashx?type=DownloadCarPhoto&imgUrl=" + newURL + "&rand=" + Math.random(),                    success: function (url) {                        alert('保存成功');                        var img = document.getElementById(imageID);                        img.src = url;                    },                    error: function () {                        alert('error')                    }                });                            },            onError: function (errorObj) {                alert(errorObj.message);            }        });        function launchEditor(id, src) {            featherEditor.launch({                image: id,                url: src            });            return false;        }script>head><body>    <form id="form1" runat="server">   <div id='injection_site'>div><img id='image1' src='https://img.alicdn.com/imgextra/i2/62935302/TB2hBzSeXXXXXbMXXXXXXXXXXXX_!!62935302.jpg'/> <p><input type='image' src='' value='Edit photo' onclick="return launchEditor('image1', 'https://img.alicdn.com/imgextra/i2/62935302/TB2hBzSeXXXXXbMXXXXXXXXXXXX_!!62935302.jpg');" />p>     form>body>html>

作者：疯吻IT 出处：http://fengwenit.cnblogs.com

回到顶部

3 参数介绍

apiKey

必须，apikey可以免费申请，https://creativesdk.adobe.com/docs/web/#/index.html

所有的工具

tools: 'text,resize',//这里设置为all，可以显示所有的工具；如果只想显示部分工具，可以用逗号分隔

所有工具如下：

enhance: Autocorrect your photo with one of five basic enhancements.
effects: Choose from a variety of effects and filters for your photo.
frames: Choose from a variety of frames to apply around your photo.
overlays: Choose from a variety of overlays to apply over your photo.
stickers: Choose from a variety of stickers you can resize and place on your photo.
orientation: Rotate and flip your photo in one tool.
crop: Crop a portion of your photo. Add presets via API. Fixed-pixel cropPresets perform a resize when applied.
resize: Resize the image using width and height number fields.
lighting: Adjust the lighting in your photo with this collection of adjustment toools.
color: Adjust the color in your photo with this collection of adjustment toools.
sharpness: Blur or sharpen the overall image in one tool.
focus: Adds a selective linear or radial focus to your photo.
vignette: Adds an adjustable vignette to your photo.
blemish: Remove skin blemishes with a brush.
whiten: Whiten teeth with a brush.
redeye: Remove redeye from your photo with a brush.
draw: Add doodle overlays with a brush.
colorsplash: Use a smart brush to colorize parts of your photo which becomes grayscale otherwise.
text: Add custom, resizable text.
meme: Turn your photo into a meme with this tool that adds text to the top and bottom of your photo.

默认展开的工具

initTool: 'text',//默认展开的工具

语言

language: 'zh_HANS',//简体中文

默认en 为英语

保存

onSave: function (imageID, newURL) {                //alert(newURL);                $.ajax({                    url: "ashx/CarInfo.ashx?type=DownloadCarPhoto&imgUrl=" + newURL + "&rand=" + Math.random(),                    success: function (url) {                        alert('保存成功');                        var img = document.getElementById(imageID);                        img.src = url;                    },                    error: function () {                        alert('error')                    }                });            },

转载来自：https://www.cnblogs.com/fengwenit/p/4738260.html

weixin_39866974

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片编辑不显示图片_在线编辑图片

1 效果图点击 “Edit Photo” 按钮，查看效果图2 实现复制下面代码，保存为html文件<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"...
复制链接

扫一扫