/
index.html
322 lines (208 loc) · 22.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../node_modules/html2canvas/dist/html2canvas.js"></script>
<script type="text/javascript" src="../node_modules/canvas2image/canvas2image.js"></script>
<script type="text/javascript" >
$(document).ready( function(){
$(".example1").on("click", function(event) {
console.log('test');
var ele = $(".test")[0];
event.preventDefault();
convert2canvas(ele);
// html2canvas(ele).then(function(canvas) {
// console.log(canvas.width,canvas.height);
// var dataurl = canvas.toDataURL();
// console.log(dataurl);
// var img = document.createElement('img');
// img.src = dataurl;
// // var img = Canvas2Image.convertToPNG(canvas,canvas.width,canvas.height);
// // console.log(img);
// document.body.appendChild(img);//转换图片
// // Canvas2Image.saveAsImage(canvas, canvas.width, canvas.height);//保存图片
// });
});
});
/**
* 根据window.devicePixelRatio获取像素比
*/
function DPR() {
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
return 1;
}
/**
* 将传入值转为整数
*/
function parseValue(value) {
return parseInt(value, 10);
};
function saveFile(data, filename) {
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
const event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}
function convert2canvas(cntElem) {
var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
var width = parseValue(shareContent.offsetWidth); //获取dom 宽度
var height = parseValue(shareContent.offsetHeight); //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
console.log('scale',scale);
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
// 【重要】默认转化的格式为png,也可设置为其他格式
var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
console.log(img);
document.body.appendChild(img);
$(img).css({
"width": canvas.width / 2 + "px",
"height": canvas.height / 2 + "px",
});
// saveFile(img,test.png)
Canvas2Image.saveAsJPEG(canvas, canvas.width, canvas.height);//保存图片
});
}
</script>
<style>
input{
height: 50px;
width: 200px;
}
img{
width: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="test" style="background-color: #abc; height: auto; width: 90%; margin: 0 auto;">
h甲方：北京小川在线网络技术有限公司 <br/>
法定代表人：李金波<br/>
地址：北京市海淀区花园东路11号泰兴大厦407<br/>
邮编：100083<br/>
联系人：王静雅<br/>
联系电话：13021074912<br/>
电子邮箱：wangyaya2014@xiaochuankeji.cn<br/>
乙方：<input type="text" value="张三"><br/>
姓名：<input type="text" value="张三"><br/>
性别：<input type="text" value="男"><br/>
身份证号码：<input type="text" value="1388888222222221"><br/>
联系方式：<input type="text" value="17600033456"><br/>
电子邮箱：<input type="text" value="test@mail.com"><br/>
银行卡号：<input type="text" value="62199988747681238"><br/>
开户银行：<input type="text" value="招商"><br/>
开户名：<input type="text" value="李四"><br/>
（注：因乙方提供收款账户信息有误或者银行原因导致乙方未按时收到款项的，甲方不承担任何责任。）<br/>
甲乙双方就本协议所约定的内容合作事宜，本着平等互利的原则，经友好协商一致达成本协议，以兹共同信守。<br/>
第一条 定义及释义<br/>
1.1合作作品，指乙方原创并依据本协议条款上传至甲方平台并通过甲方审核的作品。<br/>
1.2甲方平台：包括跟拍及其他由甲方及其关联公司开发、运营的播放终端及各种产品和发行平台。<br/>
第二条 合作内容<br/>
2.1合作模式：乙方为甲方平台提供16s原创短视频（注册账号上传或直接提供视频的方式），并按照协议配合甲方要求及时调整修正视频内容。<br/>
2.2 甲方拥有付费合作作品的永久、全部和完整的知识产权（包括但不限于著作权）。<br/>
2.3 活动配合：甲方有活动等需求时，乙方需要配合甲方活动，包括但不限于按照活动主题拍摄视频。<br/>
第三条 双方权利和义务<br/>
3.1 乙方权利和义务<br/>
3.1.1 乙方承诺，其向甲方提供的所有身份信息均真实、合法、有效、准确，其提供的合作作品的内容符合国家法律法规规定，不包含国家法律法规禁止的以下内容：<br/>
a) 反对宪法确定的基本原则的；<br/>
b) 危害国家统一、主权和领土完整的；<br/>
c) 泄露国家秘密、危害国家安全或者损害国家荣誉和利益的；<br/>
d) 煽动民族仇恨、民族歧视，破坏民族团结，或者侵害民族风俗、习惯的；<br/>
e) 宣扬邪教、迷信的；<br/>
f) 扰乱社会秩序，破坏社会稳定的；<br/>
g) 诱导未成年人违法犯罪和渲染暴力、色情、赌博、恐怖活动的；<br/>
h) 侮辱或者诽谤他人，侵害公民个人隐私等他人合法权益的；<br/>
i) 危害社会公德，损害民族优秀文化传统的；<br/>
j) 有关法律、行政法规和国家规定禁止的其他内容。<br/>
3.1.2乙方保证，其提供给甲方的合作作品为乙方原创作品，保证其提供的合作作品未侵犯任何第三方的合法权利，保证其有权就该作品进行本协议项下的合作。<br/>
3.1.3 乙方承诺，其签署及履行本协议的行为不与乙方与任何第三方签署的任何协议、合同相冲突或相矛盾。<br/>
3.1.4 本协议期间，乙方不得转委托或转授权任何第三方代理其履行本协议。<br/>
3.1.5 未经甲方事先书面同意，乙方不得借甲方或甲方平台名义吸收或接受任何形式的赞助、广告、代言。<br/>
3.1.6乙方不得通过任何渠道（包括但不限于新闻媒体、报刊杂志、网站、微博、博客、微信、QQ等）发布或实施任何不利于甲方或甲方平台的言论或行为，因此给甲方造成损失的，乙方应承担赔偿责任。<br/>
3.1.7甲方平台、软件以及甲方提供给乙方的任何技术资料或技术性资料含有的知识产权均归甲方所有和享有，本协议任何约定不得被解释为甲方明示或默示的赋予乙方任何有关这些知识产权的任何许可或其他权利，乙方保证不侵犯甲方享有的知识产权，不得对甲方软件进行反向工程、反编译或反汇编，保证不仿冒或者抄袭软件的部分或全部相同或类似软件设计程序，否则将赔偿甲方因此遭受的所有损失。<br/>
3.1.8乙方应妥善保管甲方平台的账号、密码等信息，该账号、密码只限乙方使用，乙方不得擅自授权、转让给第三方使用，乙方应对利用上述账号、密码所进行的一切行为负完全责任。<br/>
3.1.9乙方应保证所提供的内容均为乙方原创作品，以及持续稳定地产出，保证每周拍摄此刻视频并且达到甲方所要求视频标准至少4条，保证每月拍摄此刻视频并且达到甲方所要求视频标准至少16条。<br/>
3.1.10乙方提供至甲方平台的所有合作作品和内容的永久、全部和完整的知识产权（包括但不限于著作权）归甲方所有。甲乙双方合作期间以及合作终止后，乙方均不得在其他平台二次使用提供给甲方的视频内容。<br/>
3.1.11 在本合同有效期内，乙方违反甲方平台《用户协议》且对甲方造成重大损失，乙方需赔偿甲方因此遭受的一切损失，并向甲方支付5万元的违约金。<br/>
3.2 甲方权利和义务<br/>
3.2.1甲方享有对乙方上传的所有合作作品和内容的永久、全部和完整的知识产权（包括但不限于著作权）。甲方有权以各种方式使用合作作品，无需获得乙方或任何第三方的同意，也无需向任何第三方支付任何费用，甲方使用乙方合作作品的行为不会侵犯任何第三方的合法权利，否则甲方有权要求乙方赔偿损失。对于其他平台上出现的侵犯合作作品知识产权的行为，甲方可以自己的名义单独维权（包括但不限于发送律师函、申请证据保全、财产保全、行政投诉，提起民事诉讼、上诉、申请执行、和解、获得赔偿金等）。<br/>
3.2.2乙方授权甲方对合作作品进行修改，甲方有权在不改变、歪曲作品原意的前提下对合作作品进行修改，包括但不限于剪辑、编辑，以及制作、增加、修改作品的标题、话题、推荐语、封面图案（包括但不限于使用乙方提供的图片）、插图等。甲方对其制作、增加、修改的内容具有著作权，未经甲方事先书面同意，乙方不得擅自使用。<br/>
第四条 合作费用<br/>
4.1 甲乙双方按月结算费用，乙方达到本协议要求且没有违约情形的，甲方于每月10号向乙方支付上一整个月的合作费。乙方收到甲方支付的合作费后【1】日内，应向甲方提供收据或确认收款的证明，否则甲方有权拒绝支付下个月的合作费用。乙方应当使用本人账户收款，否则甲方有权拒绝支付任何款项。<br/>
4.2 视频拍摄达人由甲方根据内容传达、表现力、画面质量、视频拍摄水平、出境人物颜值等角度统一筛选。<br/>
4.3 KOL结算激励机制：<br/>
1.被选中的KOL达标视频统一单价为每条50元，会根据数据情况额外奖励，且甲方有权随时调整额外奖励政策；<br/>
2. KOL最终报酬=视频单价*达标数量；<br/>
3. 视频达标标准以甲方所要求视频标准为准。<br/>
4.4 甲乙双方各自承担其所有税费，并由甲方依法代扣代缴个人所得税。<br/>
第五条 双方的相互声明、陈述和保证<br/>
5.1乙方向甲方声明、陈述和保证：乙方有能力签署本协议，有完全的资质和资格从事本协议项下之合作，并在本协议有效期内持续保持该资质和资格；乙方有能力履行本协议项下之义务，并且该等履行义务的行为不违反任何对其有约束力的法律文件的限制，也不会侵犯任何第三方的合法权益。
5.2甲方向乙方声明、陈述和保证：甲方是按照中国法律法规合法设立并有效存续的独立法人，有完全的资质和资格从事本协议项下之合作，并在本协议有效期内持续保持该资质和资格，而该合作符合其经营范围之规定；甲方为签署和履行本协议，已经取得了全部必要的授权；甲方的授权代表已获得充分授权签署本协议；甲方有能力履行本协议项下之义务，并且该等履行义务的行为不违反任何对其有约束力的法律文件的限制，也不会侵犯任何第三方的合法权益。
第六条 内容保证条款
如甲方接到第三方对乙方提供的作品的删除或其他处理要求的通知(且甲方认为就上述删除/处理通知有必要对作品进行处理时），或者因乙方提供的作品涉嫌侵权而收到法院、仲裁机构等的传票/仲裁通知，甲方有权暂停使用涉及版权纠纷的该作品，并要求乙方返还已支付的合作费用。如经法院或仲裁机构判决、裁决、或与他人和解、调解导致甲方因作品版权问题承担赔偿/补偿责任的，则乙方应赔偿甲方因此所受的全部损失，包括但不限于经法院或仲裁机构判决、裁决、或与他人和解、调解导致甲方因作品版权问题承担赔偿/补偿费用以及甲方支出的律师费、诉讼费、差旅费等。
第七条 知识产权
7.1在合作期间，本着以宣传和推广为目的，甲乙双方同意在合作范围内授权对方免费使用其的名称、企业名称（商号）、商标、LOGO、视觉识别（VI），同时，乙方授权甲方免费使用甲方姓名（包括但不限于网名、艺名、昵称等）及其肖像权等。除本协议另有约定外，未经对方事先书面同意，任何一方不得擅自使用、复制对方的企业名称、商标、商号、域名、节目名称、网站名称、标志或其他任何对方拥有知识产权的内容。
7.2甲乙双方如需在其宣传材料、名片、网站建设以及其他任何方面使用合作方的名义，须经对方正式书面授权。除本协议另有约定外，未经对方书面授权，双方均不得以对方的名义进行广告宣传及商业活动。
7.3甲乙双方任何一方如违反上述规定而构成对合作方名称、商标、商号、品牌、域名和网站的侵权，对方有权根据法律法规追究违约方的侵权责任。
第八条 不可抗力
8.1 “不可抗力”是指甲乙双方不能控制、不可预见或即使预见亦无法避免的事件，包括但不限于政府行为、自然灾害、战争、罢工、黑客攻击、计算机病毒（如木马程序、蠕虫等）、电信部门技术性调整或任何其它类似事件。出现不可抗力事件时，受影响方应及时、充分地以书面形式通知对方，并告知对方该类事件对本协议可能产生的影响，并应当在不可抗力事件发生后30 日内提供该等事件的详细信息及由有关组织出具的解释受影响方因此无法履行全部或部分本协议项下义务的相关证明。
8.2因上述不可抗力致使影响本协议履行的，甲乙双方可另行协商解决，不可抗力持续时间超过一个月的，双方均有权利解除本协议，不承担违约责任。
第九条 违约责任
9.1除本协议另有约定外，甲乙双方任何一方违反了本协议约定任何条款，即视为违约，守约方有权以书面通知要求违约方纠正其违约行为并采取充分、有效、及时的措施消除违约后果，并赔偿守约方因违约方之违约行为而遭受的损失，违约方在收到守约方发出的书面通知后十日内未予以充分纠正其违约行为，则守约方有权在做出书面通知的情况下单方解除本协议，违约方应赔偿因其违约行为而给守约方带来的所有损失。
9.2除本协议另有约定外，违约事实发生后，经守约方合理及客观判断，该违约事实已造成守约方签署本协议的目的从根本上无法实现，则守约方有权在做出书面通知的情况下单方解除本协议，违约方应赔偿因其违约行为而给守约方带来的所有损失。
第十条 保密条款
10.1未经对方事先书面许可，任何一方不得向第三方（有关法律、法规、政府部门、证券交易所或其它监管机构要求和甲乙双方的法律、会计、商业及其它顾问、授权雇员除外）泄露本协议的任何内容、本协议的签订及履行情况，以及通过签订和履行本协议而获知的对方及对方关联公司的任何信息。
10.2本协议项下的保密义务为永久，本协议终止后，本保密条款仍具法律效力。
第十一条 协议有效期与终止
11.1本协议自乙方点击接受按钮 之日起生效，有效期为3 个月。若有效期期满前，任何一方有意续约的，应提前5日书面通知另一方，经双方协商一致，可就续签事宜另行签署协议；否则，本协议有效期届满后自动终止。
11.2除本协议另有约定外，本协议在有效期内的任何时间，可在下列情况下修改或终止：
11.2.1双方协商一致同意修改或解除本协议；
11.2.2乙方没有达到协议要求；
11.2.3 因不可抗力而解除本协议；
11.2.4 任何一方的主体资格消失，如破产。但进行并购、重组、名称变更等不在此列
11.3本协议的提前终止不影响双方于本协议提前终止日之前根据本协议已产生的权利和义务。
第十二条 争议解决与适用法律
12.1所有与本协议有关的争议，甲乙双方均应通过友好协商的方式予以解决，如协商不成，则任一方可向甲方所在地的人民法院提请诉讼。
12.2本协议的订立、效力、解释、履行、修改、终止以及争议的解决均适用中华人民共和国的法律。<br/>
第十三条 通知<br/>
13.1按本协议约定由任何一方发给其他方的任何通知或者书面通讯，应以挂号邮寄、图文传真、专递形式发出，送至本意向协议之首页所列各方的地址。<br/>
13.2如采用挂号邮寄方式，上述文件或通知在投邮后第四日，即视为送达和收到之日；如采用图文传真方式，发送成功回执所示之日，即视为送达和收到之日；如采用专递方式，专递人员将上述文件或通知送达收件人地址之日，即视为送达和收到之日。如果联系方式之任何一项发生变更，相关方应在变更后七日内将更改后的联系方式按本条的约定书面通知对方。此后，本条约定的通知、文件或申请应按变更后的联系方式送达。
第十四条 其他<br/>
14.1未经一方事先书面同意，另一方不得将本协议项下的全部或部分权利或义务转让给任何第三方。<br/>
14.2本协议的任何一方未能及时行使本协议项下的权利不应被视为放弃该权利，也不影响该方在将来行使该权利。<br/>
14.3 如果本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，或违反任何适用的法律，则该条款被视为删除。但本协议的其余条款仍应有效并且有约束力。
<br/>
14.4本协议未尽事宜，双方应本着互惠互利、友好协商的原则，以附件或补充协议等形式另行约定。<br/>
14.5 为了方便起见，甲方将本合同电子版本呈现于甲方平台，乙方通过点击按钮作出选择接受或者不接受本合同条款的意思表示。如乙方对合同条款有异议，乙方需点击不接受按钮，并提出意见，双方协商修改；乙方一旦点击接受按钮，即视为甲乙双方协商签订本协议。
14.6本协议一式贰份，双方各持壹份，具有同等法律效力。<br/>
</div>
<button class="example1" type="button" value="截图" style="display: block; width: 100px;height: 50px; margin: 10px auto;">
截图并下载
</button>
</body>
</html>